Fixed: Don't repeatedly re-render cells

frontend/src/Artist/Index/Banners/ArtistIndexBanner.js

@@ -54,7 +54,6 @@ class ArtistIndexBanner extends Component {
 
   render() {
     const {
-      style,
       id,
       artistName,
       monitored,
@@ -102,7 +101,7 @@ class ArtistIndexBanner extends Component {
     };
 
     return (
-      <div className={styles.container} style={style}>
+      <div className={styles.container}>
         <div className={styles.content}>
           <div className={styles.bannerContainer}>
             <Label className={styles.controls}>
@@ -234,7 +233,6 @@ class ArtistIndexBanner extends Component {
 }
 
 ArtistIndexBanner.propTypes = {
-  style: PropTypes.object.isRequired,
   id: PropTypes.number.isRequired,
   artistName: PropTypes.string.isRequired,
   monitored: PropTypes.bool.isRequired,

frontend/src/Artist/Index/Banners/ArtistIndexBanners.js

@@ -219,8 +219,12 @@ class ArtistIndexBanners extends Component {
     }
 
     return (
-      <ArtistIndexItemConnector
+      <div
+        style={style}
         key={key}
+      >
+        <ArtistIndexItemConnector
+          key={artist.id}
           component={ArtistIndexBanner}
           sortKey={sortKey}
           bannerWidth={bannerWidth}
@@ -232,11 +236,11 @@ class ArtistIndexBanners extends Component {
           showRelativeDates={showRelativeDates}
           shortDateFormat={shortDateFormat}
           timeFormat={timeFormat}
-        style={style}
           artistId={artist.id}
           qualityProfileId={artist.qualityProfileId}
           metadataProfileId={artist.metadataProfileId}
         />
+      </div>
     );
   }
 
@@ -296,6 +300,7 @@ class ArtistIndexBanners extends Component {
                 overscanRowCount={2}
                 cellRenderer={this.cellRenderer}
                 onSectionRendered={this.onSectionRendered}
+                isScrollingOptOut={true}
               />
             );
           }

frontend/src/Artist/Index/Overview/ArtistIndexOverview.js

@@ -70,7 +70,6 @@ class ArtistIndexOverview extends Component {
 
   render() {
     const {
-      style,
       id,
       artistName,
       overview,
@@ -122,7 +121,7 @@ class ArtistIndexOverview extends Component {
     const overviewHeight = contentHeight - titleRowHeight;
 
     return (
-      <div className={styles.container} style={style}>
+      <div className={styles.container}>
         <div className={styles.content}>
           <div className={styles.poster}>
             <div className={styles.posterContainer}>
@@ -245,7 +244,6 @@ class ArtistIndexOverview extends Component {
 }
 
 ArtistIndexOverview.propTypes = {
-  style: PropTypes.object.isRequired,
   id: PropTypes.number.isRequired,
   artistName: PropTypes.string.isRequired,
   overview: PropTypes.string.isRequired,

frontend/src/Artist/Index/Overview/ArtistIndexOverviews.js

@@ -185,8 +185,12 @@ class ArtistIndexOverviews extends Component {
     }
 
     return (
-      <ArtistIndexItemConnector
+      <div
         key={key}
+        style={style}
+      >
+        <ArtistIndexItemConnector
+          key={artist.id}
           component={ArtistIndexOverview}
           sortKey={sortKey}
           posterWidth={posterWidth}
@@ -198,11 +202,11 @@ class ArtistIndexOverviews extends Component {
           longDateFormat={longDateFormat}
           timeFormat={timeFormat}
           isSmallScreen={isSmallScreen}
-        style={style}
           artistId={artist.id}
           qualityProfileId={artist.qualityProfileId}
           metadataProfileId={artist.metadataProfileId}
         />
+      </div>
     );
   }
 
@@ -258,6 +262,7 @@ class ArtistIndexOverviews extends Component {
                 overscanRowCount={2}
                 cellRenderer={this.cellRenderer}
                 onSectionRendered={this.onSectionRendered}
+                isScrollingOptOut={true}
               />
             );
           }

frontend/src/Artist/Index/Posters/ArtistIndexPoster.js

@@ -67,7 +67,6 @@ class ArtistIndexPoster extends Component {
 
   render() {
     const {
-      style,
       id,
       artistName,
       monitored,
@@ -116,7 +115,7 @@ class ArtistIndexPoster extends Component {
     };
 
     return (
-      <div className={styles.container} style={style}>
+      <div className={styles.container}>
         <div className={styles.content}>
           <div className={styles.posterContainer}>
             <Label className={styles.controls}>
@@ -257,7 +256,6 @@ class ArtistIndexPoster extends Component {
 }
 
 ArtistIndexPoster.propTypes = {
-  style: PropTypes.object.isRequired,
   id: PropTypes.number.isRequired,
   artistName: PropTypes.string.isRequired,
   monitored: PropTypes.bool.isRequired,

frontend/src/Artist/Index/Posters/ArtistIndexPosters.js

@@ -212,15 +212,20 @@ class ArtistIndexPosters extends Component {
       showQualityProfile
     } = posterOptions;
 
-    const artist = items[rowIndex * columnCount + columnIndex];
+    const artistIdx = rowIndex * columnCount + columnIndex;
+    const artist = items[artistIdx];
 
     if (!artist) {
       return null;
     }
 
     return (
-      <ArtistIndexItemConnector
+      <div
         key={key}
+        style={style}
+      >
+        <ArtistIndexItemConnector
+          key={artist.id}
           component={ArtistIndexPoster}
           sortKey={sortKey}
           posterWidth={posterWidth}
@@ -232,11 +237,11 @@ class ArtistIndexPosters extends Component {
           showRelativeDates={showRelativeDates}
           shortDateFormat={shortDateFormat}
           timeFormat={timeFormat}
-        style={style}
           artistId={artist.id}
           qualityProfileId={artist.qualityProfileId}
           metadataProfileId={artist.metadataProfileId}
         />
+      </div>
     );
   }
 
@@ -296,6 +301,7 @@ class ArtistIndexPosters extends Component {
                 overscanRowCount={2}
                 cellRenderer={this.cellRenderer}
                 onSectionRendered={this.onSectionRendered}
+                isScrollingOptOut={true}
               />
             );
           }

frontend/src/Artist/Index/Table/ArtistIndexRow.js

@@ -10,8 +10,6 @@ import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import ProgressBar from 'Components/ProgressBar';
 import TagListConnector from 'Components/TagListConnector';
-// import CheckInput from 'Components/Form/CheckInput';
-import VirtualTableRow from 'Components/Table/VirtualTableRow';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import ArtistNameLink from 'Artist/ArtistNameLink';
@@ -79,7 +77,6 @@ class ArtistIndexRow extends Component {
 
   render() {
     const {
-      style,
       id,
       monitored,
       status,
@@ -121,7 +118,7 @@ class ArtistIndexRow extends Component {
     } = this.state;
 
     return (
-      <VirtualTableRow style={style}>
+      <>
         {
           columns.map((column) => {
             const {
@@ -436,13 +433,12 @@ class ArtistIndexRow extends Component {
           artistId={id}
           onModalClose={this.onDeleteArtistModalClose}
         />
-      </VirtualTableRow>
+      </>
     );
   }
 }
 
 ArtistIndexRow.propTypes = {
-  style: PropTypes.object.isRequired,
   id: PropTypes.number.isRequired,
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,

frontend/src/Artist/Index/Table/ArtistIndexTable.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
 import { sortDirections } from 'Helpers/Props';
 import VirtualTable from 'Components/Table/VirtualTable';
+import VirtualTableRow from 'Components/Table/VirtualTableRow';
 import ArtistIndexItemConnector from 'Artist/Index/ArtistIndexItemConnector';
 import ArtistIndexHeaderConnector from './ArtistIndexHeaderConnector';
 import ArtistIndexRow from './ArtistIndexRow';
@@ -50,8 +51,12 @@ class ArtistIndexTable extends Component {
     const artist = items[rowIndex];
 
     return (
-      <ArtistIndexItemConnector
+      <VirtualTableRow
         key={key}
+        style={style}
+      >
+        <ArtistIndexItemConnector
+          key={artist.id}
           component={ArtistIndexRow}
           style={style}
           columns={columns}
@@ -60,6 +65,7 @@ class ArtistIndexTable extends Component {
           metadataProfileId={artist.metadataProfileId}
           showBanners={showBanners}
         />
+      </VirtualTableRow>
     );
   }
 
@@ -108,6 +114,7 @@ class ArtistIndexTable extends Component {
         sortDirection={sortDirection}
         onRender={onRender}
         onScroll={onScroll}
+        isScrollingOptOut={true}
       />
     );
   }