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,24 +219,28 @@ class ArtistIndexBanners extends Component {
     }
 
     return (
-      <ArtistIndexItemConnector
+      <div
-        key={key}
-        component={ArtistIndexBanner}
-        sortKey={sortKey}
-        bannerWidth={bannerWidth}
-        bannerHeight={bannerHeight}
-        detailedProgressBar={detailedProgressBar}
-        showTitle={showTitle}
-        showMonitored={showMonitored}
-        showQualityProfile={showQualityProfile}
-        showRelativeDates={showRelativeDates}
-        shortDateFormat={shortDateFormat}
-        timeFormat={timeFormat}
         style={style}
-        artistId={artist.id}
+        key={key}
-        qualityProfileId={artist.qualityProfileId}
+      >
-        metadataProfileId={artist.metadataProfileId}
+        <ArtistIndexItemConnector
-      />
+          key={artist.id}
+          component={ArtistIndexBanner}
+          sortKey={sortKey}
+          bannerWidth={bannerWidth}
+          bannerHeight={bannerHeight}
+          detailedProgressBar={detailedProgressBar}
+          showTitle={showTitle}
+          showMonitored={showMonitored}
+          showQualityProfile={showQualityProfile}
+          showRelativeDates={showRelativeDates}
+          shortDateFormat={shortDateFormat}
+          timeFormat={timeFormat}
+          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,24 +185,28 @@ class ArtistIndexOverviews extends Component {
     }
 
     return (
-      <ArtistIndexItemConnector
+      <div
         key={key}
-        component={ArtistIndexOverview}
-        sortKey={sortKey}
-        posterWidth={posterWidth}
-        posterHeight={posterHeight}
-        rowHeight={rowHeight}
-        overviewOptions={overviewOptions}
-        showRelativeDates={showRelativeDates}
-        shortDateFormat={shortDateFormat}
-        longDateFormat={longDateFormat}
-        timeFormat={timeFormat}
-        isSmallScreen={isSmallScreen}
         style={style}
-        artistId={artist.id}
+      >
-        qualityProfileId={artist.qualityProfileId}
+        <ArtistIndexItemConnector
-        metadataProfileId={artist.metadataProfileId}
+          key={artist.id}
-      />
+          component={ArtistIndexOverview}
+          sortKey={sortKey}
+          posterWidth={posterWidth}
+          posterHeight={posterHeight}
+          rowHeight={rowHeight}
+          overviewOptions={overviewOptions}
+          showRelativeDates={showRelativeDates}
+          shortDateFormat={shortDateFormat}
+          longDateFormat={longDateFormat}
+          timeFormat={timeFormat}
+          isSmallScreen={isSmallScreen}
+          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,31 +212,36 @@ 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}
-        component={ArtistIndexPoster}
-        sortKey={sortKey}
-        posterWidth={posterWidth}
-        posterHeight={posterHeight}
-        detailedProgressBar={detailedProgressBar}
-        showTitle={showTitle}
-        showMonitored={showMonitored}
-        showQualityProfile={showQualityProfile}
-        showRelativeDates={showRelativeDates}
-        shortDateFormat={shortDateFormat}
-        timeFormat={timeFormat}
         style={style}
-        artistId={artist.id}
+      >
-        qualityProfileId={artist.qualityProfileId}
+        <ArtistIndexItemConnector
-        metadataProfileId={artist.metadataProfileId}
+          key={artist.id}
-      />
+          component={ArtistIndexPoster}
+          sortKey={sortKey}
+          posterWidth={posterWidth}
+          posterHeight={posterHeight}
+          detailedProgressBar={detailedProgressBar}
+          showTitle={showTitle}
+          showMonitored={showMonitored}
+          showQualityProfile={showQualityProfile}
+          showRelativeDates={showRelativeDates}
+          shortDateFormat={shortDateFormat}
+          timeFormat={timeFormat}
+          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,16 +51,21 @@ class ArtistIndexTable extends Component {
     const artist = items[rowIndex];
 
     return (
-      <ArtistIndexItemConnector
+      <VirtualTableRow
         key={key}
-        component={ArtistIndexRow}
         style={style}
-        columns={columns}
+      >
-        artistId={artist.id}
+        <ArtistIndexItemConnector
-        qualityProfileId={artist.qualityProfileId}
+          key={artist.id}
-        metadataProfileId={artist.metadataProfileId}
+          component={ArtistIndexRow}
-        showBanners={showBanners}
+          style={style}
-      />
+          columns={columns}
+          artistId={artist.id}
+          qualityProfileId={artist.qualityProfileId}
+          metadataProfileId={artist.metadataProfileId}
+          showBanners={showBanners}
+        />
+      </VirtualTableRow>
     );
   }
 
@@ -108,6 +114,7 @@ class ArtistIndexTable extends Component {
         sortDirection={sortDirection}
         onRender={onRender}
         onScroll={onScroll}
+        isScrollingOptOut={true}
       />
     );
   }