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,8 +185,13 @@ class SeriesIndexOverviews extends Component {
     }
 
     return (
-      <SeriesIndexItemConnector
+      <div
+        className={styles.container}
         key={key}
+        style={style}
+      >
+        <SeriesIndexItemConnector
+          key={series.id}
           component={SeriesIndexOverview}
           sortKey={sortKey}
           posterWidth={posterWidth}
@@ -203,6 +208,7 @@ class SeriesIndexOverviews extends Component {
           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,7 +114,6 @@ class SeriesIndexPoster extends Component {
     };
 
     return (
-      <div className={styles.container} style={style}>
       <div className={styles.content}>
         <div className={styles.posterContainer}>
           <Label className={styles.controls}>
@@ -249,13 +247,11 @@ class SeriesIndexPoster extends Component {
           onModalClose={this.onDeleteSeriesModalClose}
         />
       </div>
-      </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,8 +220,13 @@ class SeriesIndexPosters extends Component {
     }
 
     return (
-      <SeriesIndexItemConnector
+      <div
+        className={styles.container}
         key={key}
+        style={style}
+      >
+        <SeriesIndexItemConnector
+          key={series.id}
           component={SeriesIndexPoster}
           sortKey={sortKey}
           posterWidth={posterWidth}
@@ -238,6 +243,7 @@ class SeriesIndexPosters extends Component {
           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}
+      >
+        <SeriesIndexItemConnector
+          key={series.id}
+          component={SeriesIndexRow}
           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}
       />
     );
   }