Don't rerender all cells each scroll

frontend/src/Series/Index/Overview/SeriesIndexOverview.css

@@ -1,13 +1,5 @@
 $hoverScale: 1.05;
 
-.container {
-  &:hover {
-    .content {
-      background-color: $tableRowHoverBackgroundColor;
-    }
-  }
-}
-
 .content {
   display: flex;
   flex-grow: 1;

frontend/src/Series/Index/Overview/SeriesIndexOverview.js

@@ -70,7 +70,6 @@ class SeriesIndexOverview extends Component {
 
   render() {
     const {
-      style,
       id,
       title,
       overview,
@@ -121,7 +120,7 @@ class SeriesIndexOverview 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}>
@@ -242,7 +241,6 @@ class SeriesIndexOverview extends Component {
 }
 
 SeriesIndexOverview.propTypes = {
-  style: PropTypes.object.isRequired,
   id: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
   overview: PropTypes.string.isRequired,

frontend/src/Series/Index/Overview/SeriesIndexOverviews.css

@@ -1,3 +1,11 @@
 .grid {
   flex: 1 0 auto;
 }
+
+.container {
+  &:hover {
+    .content {
+      background-color: $tableRowHoverBackgroundColor;
+    }
+  }
+}

frontend/src/Series/Index/Overview/SeriesIndexOverviews.js

@@ -185,24 +185,30 @@ class SeriesIndexOverviews extends Component {
     }
 
     return (
-      <SeriesIndexItemConnector
+      <div
+        className={styles.container}
         key={key}
-        component={SeriesIndexOverview}
-        sortKey={sortKey}
-        posterWidth={posterWidth}
-        posterHeight={posterHeight}
-        rowHeight={rowHeight}
-        overviewOptions={overviewOptions}
-        showRelativeDates={showRelativeDates}
-        shortDateFormat={shortDateFormat}
-        longDateFormat={longDateFormat}
-        timeFormat={timeFormat}
-        isSmallScreen={isSmallScreen}
         style={style}
-        seriesId={series.id}
+      >
-        languageProfileId={series.languageProfileId}
+        <SeriesIndexItemConnector
-        qualityProfileId={series.qualityProfileId}
+          key={series.id}
-      />
+          component={SeriesIndexOverview}
+          sortKey={sortKey}
+          posterWidth={posterWidth}
+          posterHeight={posterHeight}
+          rowHeight={rowHeight}
+          overviewOptions={overviewOptions}
+          showRelativeDates={showRelativeDates}
+          shortDateFormat={shortDateFormat}
+          longDateFormat={longDateFormat}
+          timeFormat={timeFormat}
+          isSmallScreen={isSmallScreen}
+          style={style}
+          seriesId={series.id}
+          languageProfileId={series.languageProfileId}
+          qualityProfileId={series.qualityProfileId}
+        />
+      </div>
     );
   }
 
@@ -258,6 +264,7 @@ class SeriesIndexOverviews extends Component {
                 overscanRowCount={2}
                 cellRenderer={this.cellRenderer}
                 onSectionRendered={this.onSectionRendered}
+                isScrollingOptOut={true}
               />
             );
           }

frontend/src/Series/Index/Posters/SeriesIndexPoster.css

@@ -1,9 +1,5 @@
 $hoverScale: 1.05;
 
-.container {
-  padding: 10px;
-}
-
 .content {
   transition: all 200ms ease-in;
 

frontend/src/Series/Index/Posters/SeriesIndexPoster.js

@@ -67,7 +67,6 @@ class SeriesIndexPoster extends Component {
 
   render() {
     const {
-      style,
       id,
       title,
       monitored,
@@ -115,147 +114,144 @@ class SeriesIndexPoster extends Component {
     };
 
     return (
-      <div className={styles.container} style={style}>
+      <div className={styles.content}>
-        <div className={styles.content}>
+        <div className={styles.posterContainer}>
-          <div className={styles.posterContainer}>
+          <Label className={styles.controls}>
-            <Label className={styles.controls}>
+            <SpinnerIconButton
-              <SpinnerIconButton
+              className={styles.action}
-                className={styles.action}
+              name={icons.REFRESH}
-                name={icons.REFRESH}
+              title="Refresh series"
-                title="Refresh series"
+              isSpinning={isRefreshingSeries}
-                isSpinning={isRefreshingSeries}
+              onPress={onRefreshSeriesPress}
-                onPress={onRefreshSeriesPress}
+            />
-              />
-
-              {
-                showSearchAction &&
-                  <SpinnerIconButton
-                    className={styles.action}
-                    name={icons.SEARCH}
-                    title="Search for monitored episodes"
-                    isSpinning={isSearchingSeries}
-                    onPress={onSearchPress}
-                  />
-              }
-
-              <IconButton
-                className={styles.action}
-                name={icons.EDIT}
-                title="Edit Series"
-                onPress={this.onEditSeriesPress}
-              />
-            </Label>
 
             {
-              status === 'ended' &&
+              showSearchAction &&
-                <div
+                <SpinnerIconButton
-                  className={styles.ended}
+                  className={styles.action}
-                  title="Ended"
+                  name={icons.SEARCH}
+                  title="Search for monitored episodes"
+                  isSpinning={isSearchingSeries}
+                  onPress={onSearchPress}
                 />
             }
 
-            <Link
+            <IconButton
-              className={styles.link}
+              className={styles.action}
-              style={elementStyle}
+              name={icons.EDIT}
-              to={link}
+              title="Edit Series"
-            >
+              onPress={this.onEditSeriesPress}
-              <SeriesPoster
+            />
-                style={elementStyle}
+          </Label>
-                images={images}
+
-                size={250}
+          {
-                lazy={false}
+            status === 'ended' &&
-                overflow={true}
+              <div
-                onError={this.onPosterLoadError}
+                className={styles.ended}
-                onLoad={this.onPosterLoad}
+                title="Ended"
               />
-
-              {
-                hasPosterError &&
-                  <div className={styles.overlayTitle}>
-                    {title}
-                  </div>
-              }
-            </Link>
-          </div>
-
-          <SeriesIndexProgressBar
-            monitored={monitored}
-            status={status}
-            episodeCount={episodeCount}
-            episodeFileCount={episodeFileCount}
-            totalEpisodeCount={totalEpisodeCount}
-            posterWidth={posterWidth}
-            detailedProgressBar={detailedProgressBar}
-          />
-
-          {
-            showTitle &&
-              <div className={styles.title}>
-                {title}
-              </div>
           }
 
-          {
+          <Link
-            showMonitored &&
+            className={styles.link}
-              <div className={styles.title}>
+            style={elementStyle}
-                {monitored ? 'Monitored' : 'Unmonitored'}
+            to={link}
-              </div>
+          >
-          }
+            <SeriesPoster
+              style={elementStyle}
+              images={images}
+              size={250}
+              lazy={false}
+              overflow={true}
+              onError={this.onPosterLoadError}
+              onLoad={this.onPosterLoad}
+            />
 
-          {
+            {
-            showQualityProfile &&
+              hasPosterError &&
-              <div className={styles.title}>
+                <div className={styles.overlayTitle}>
-                {qualityProfile.name}
+                  {title}
-              </div>
+                </div>
-          }
+            }
-
+          </Link>
-          {
-            nextAiring &&
-              <div className={styles.nextAiring}>
-                {
-                  getRelativeDate(
-                    nextAiring,
-                    shortDateFormat,
-                    showRelativeDates,
-                    {
-                      timeFormat,
-                      timeForToday: true
-                    }
-                  )
-                }
-              </div>
-          }
-
-          <SeriesIndexPosterInfo
-            seasonCount={seasonCount}
-            qualityProfile={qualityProfile}
-            showQualityProfile={showQualityProfile}
-            showRelativeDates={showRelativeDates}
-            shortDateFormat={shortDateFormat}
-            timeFormat={timeFormat}
-            {...otherProps}
-          />
-
-          <EditSeriesModalConnector
-            isOpen={isEditSeriesModalOpen}
-            seriesId={id}
-            onModalClose={this.onEditSeriesModalClose}
-            onDeleteSeriesPress={this.onDeleteSeriesPress}
-          />
-
-          <DeleteSeriesModal
-            isOpen={isDeleteSeriesModalOpen}
-            seriesId={id}
-            onModalClose={this.onDeleteSeriesModalClose}
-          />
         </div>
+
+        <SeriesIndexProgressBar
+          monitored={monitored}
+          status={status}
+          episodeCount={episodeCount}
+          episodeFileCount={episodeFileCount}
+          totalEpisodeCount={totalEpisodeCount}
+          posterWidth={posterWidth}
+          detailedProgressBar={detailedProgressBar}
+        />
+
+        {
+          showTitle &&
+            <div className={styles.title}>
+              {title}
+            </div>
+        }
+
+        {
+          showMonitored &&
+            <div className={styles.title}>
+              {monitored ? 'Monitored' : 'Unmonitored'}
+            </div>
+        }
+
+        {
+          showQualityProfile &&
+            <div className={styles.title}>
+              {qualityProfile.name}
+            </div>
+        }
+
+        {
+          nextAiring &&
+            <div className={styles.nextAiring}>
+              {
+                getRelativeDate(
+                  nextAiring,
+                  shortDateFormat,
+                  showRelativeDates,
+                  {
+                    timeFormat,
+                    timeForToday: true
+                  }
+                )
+              }
+            </div>
+        }
+
+        <SeriesIndexPosterInfo
+          seasonCount={seasonCount}
+          qualityProfile={qualityProfile}
+          showQualityProfile={showQualityProfile}
+          showRelativeDates={showRelativeDates}
+          shortDateFormat={shortDateFormat}
+          timeFormat={timeFormat}
+          {...otherProps}
+        />
+
+        <EditSeriesModalConnector
+          isOpen={isEditSeriesModalOpen}
+          seriesId={id}
+          onModalClose={this.onEditSeriesModalClose}
+          onDeleteSeriesPress={this.onDeleteSeriesPress}
+        />
+
+        <DeleteSeriesModal
+          isOpen={isDeleteSeriesModalOpen}
+          seriesId={id}
+          onModalClose={this.onDeleteSeriesModalClose}
+        />
       </div>
     );
   }
 }
 
 SeriesIndexPoster.propTypes = {
-  style: PropTypes.object.isRequired,
   id: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
   monitored: PropTypes.bool.isRequired,

frontend/src/Series/Index/Posters/SeriesIndexPosters.css

@@ -1,3 +1,7 @@
 .grid {
   flex: 1 0 auto;
 }
+
+.container {
+  padding: 10px;
+}

frontend/src/Series/Index/Posters/SeriesIndexPosters.js

@@ -220,24 +220,30 @@ class SeriesIndexPosters extends Component {
     }
 
     return (
-      <SeriesIndexItemConnector
+      <div
+        className={styles.container}
         key={key}
-        component={SeriesIndexPoster}
-        sortKey={sortKey}
-        posterWidth={posterWidth}
-        posterHeight={posterHeight}
-        detailedProgressBar={detailedProgressBar}
-        showTitle={showTitle}
-        showMonitored={showMonitored}
-        showQualityProfile={showQualityProfile}
-        showRelativeDates={showRelativeDates}
-        shortDateFormat={shortDateFormat}
-        timeFormat={timeFormat}
         style={style}
-        seriesId={series.id}
+      >
-        languageProfileId={series.languageProfileId}
+        <SeriesIndexItemConnector
-        qualityProfileId={series.qualityProfileId}
+          key={series.id}
-      />
+          component={SeriesIndexPoster}
+          sortKey={sortKey}
+          posterWidth={posterWidth}
+          posterHeight={posterHeight}
+          detailedProgressBar={detailedProgressBar}
+          showTitle={showTitle}
+          showMonitored={showMonitored}
+          showQualityProfile={showQualityProfile}
+          showRelativeDates={showRelativeDates}
+          shortDateFormat={shortDateFormat}
+          timeFormat={timeFormat}
+          style={style}
+          seriesId={series.id}
+          languageProfileId={series.languageProfileId}
+          qualityProfileId={series.qualityProfileId}
+        />
+      </div>
     );
   }
 
@@ -297,6 +303,7 @@ class SeriesIndexPosters extends Component {
                 overscanRowCount={2}
                 cellRenderer={this.cellRenderer}
                 onSectionRendered={this.onSectionRendered}
+                isScrollingOptOut={true}
               />
             );
           }

frontend/src/Series/Index/Table/SeriesIndexRow.js

@@ -12,7 +12,6 @@ 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 SeriesTitleLink from 'Series/SeriesTitleLink';
@@ -79,7 +78,6 @@ class SeriesIndexRow extends Component {
 
   render() {
     const {
-      style,
       id,
       monitored,
       status,
@@ -126,7 +124,7 @@ class SeriesIndexRow extends Component {
     } = this.state;
 
     return (
-      <VirtualTableRow style={style}>
+      <>
         {
           columns.map((column) => {
             const {
@@ -494,13 +492,12 @@ class SeriesIndexRow extends Component {
           seriesId={id}
           onModalClose={this.onDeleteSeriesModalClose}
         />
-      </VirtualTableRow>
+      </>
     );
   }
 }
 
 SeriesIndexRow.propTypes = {
-  style: PropTypes.object.isRequired,
   id: PropTypes.number.isRequired,
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,

frontend/src/Series/Index/Table/SeriesIndexTable.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 SeriesIndexItemConnector from 'Series/Index/SeriesIndexItemConnector';
 import SeriesIndexHeaderConnector from './SeriesIndexHeaderConnector';
 import SeriesIndexRow from './SeriesIndexRow';
@@ -50,16 +51,20 @@ class SeriesIndexTable extends Component {
     const series = items[rowIndex];
 
     return (
-      <SeriesIndexItemConnector
+      <VirtualTableRow
         key={key}
-        component={SeriesIndexRow}
         style={style}
-        columns={columns}
+      >
-        seriesId={series.id}
+        <SeriesIndexItemConnector
-        languageProfileId={series.languageProfileId}
+          key={series.id}
-        qualityProfileId={series.qualityProfileId}
+          component={SeriesIndexRow}
-        showBanners={showBanners}
+          columns={columns}
-      />
+          seriesId={series.id}
+          languageProfileId={series.languageProfileId}
+          qualityProfileId={series.qualityProfileId}
+          showBanners={showBanners}
+        />
+      </VirtualTableRow>
     );
   }
 
@@ -108,6 +113,7 @@ class SeriesIndexTable extends Component {
         sortDirection={sortDirection}
         onRender={onRender}
         onScroll={onScroll}
+        isScrollingOptOut={true}
       />
     );
   }