Fixed: Improve performance of Manual Import movie selector

frontend/src/InteractiveImport/Movie/SelectMovieModalContent.css

@@ -14,7 +14,7 @@
 }
 
 .scroller {
-  flex: 1 1 auto;
+  min-height: 1px;
 }
 
 .footer {

frontend/src/InteractiveImport/Movie/SelectMovieModalContent.js

@@ -1,6 +1,9 @@
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { scrollDirections } from 'Helpers/Props';
+import VirtualTable from 'Components/Table/VirtualTable';
+import VirtualTableRow from 'Components/Table/VirtualTableRow';
 import Button from 'Components/Link/Button';
 import Scroller from 'Components/Scroller/Scroller';
 import TextInput from 'Components/Form/TextInput';
@@ -8,9 +11,13 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import SelectMovieRow from './SelectMovieRow';
+import FuseWorker from 'Components/Page/Header/fuse.worker';
 import styles from './SelectMovieModalContent.css';
 
+const workerInstance = new FuseWorker();
+
 class SelectMovieModalContent extends Component {
 
   //
@@ -20,15 +27,84 @@ class SelectMovieModalContent extends Component {
     super(props, context);
 
     this.state = {
-      filter: ''
+      scroller: null,
+      filter: '',
+      showLoading: false,
+      suggestions: props.items
     };
   }
 
+  componentDidMount() {
+    workerInstance.addEventListener('message', this.onSuggestionsReceived, false);
+  }
+
+  //
+  // Control
+
+  setScrollerRef = (ref) => {
+    this.setState({ scroller: ref });
+  }
+
+  rowRenderer = ({ key, rowIndex, style }) => {
+    const item = this.state.suggestions[rowIndex];
+
+    return (
+      <VirtualTableRow
+        key={key}
+        style={style}
+      >
+        <SelectMovieRow
+          key={item.id}
+          id={item.id}
+          title={item.title}
+          year={item.year}
+          onMovieSelect={this.props.onMovieSelect}
+        />
+      </VirtualTableRow>
+    );
+  }
+
   //
   // Listeners
 
   onFilterChange = ({ value }) => {
-    this.setState({ filter: value.toLowerCase() });
+    if (value) {
+      this.setState({
+        showLoading: true,
+        filter: value.toLowerCase()
+      });
+      this.requestSuggestions(value);
+    } else {
+      this.setState({
+        showLoading: false,
+        filter: '',
+        suggestions: this.props.items
+      });
+      this.requestSuggestions.cancel();
+    }
+  }
+
+  requestSuggestions = _.debounce((value) => {
+    const payload = {
+      value,
+      movies: this.props.items
+    };
+
+    workerInstance.postMessage(payload);
+  }, 250);
+
+  onSuggestionsReceived = (message) => {
+    this.setState((state, props) => {
+      // this guards against setting a stale set of suggestions returned
+      // after the filter has been cleared
+      if (state.filter !== '') {
+        return {
+          showLoading: false,
+          suggestions: message.data.map((suggestion) => suggestion.item)
+        };
+      }
+      return {};
+    });
   }
 
   //
@@ -36,13 +112,16 @@ class SelectMovieModalContent extends Component {
 
   render() {
     const {
-      items,
       relativePath,
-      onMovieSelect,
       onModalClose
     } = this.props;
 
-    const filter = this.state.filter;
+    const {
+      scroller,
+      filter,
+      showLoading,
+      suggestions
+    } = this.state;
 
     return (
       <ModalContent onModalClose={onModalClose}>
@@ -58,29 +137,32 @@ class SelectMovieModalContent extends Component {
         >
           <TextInput
             className={styles.filterInput}
-            placeholder="Filter movie"
+            placeholder="Search movies"
             name="filter"
             value={filter}
             autoFocus={true}
             onChange={this.onFilterChange}
           />
 
-          <Scroller className={styles.scroller}>
-            {
-              items.map((item) => {
-                return item.title.toLowerCase().includes(filter) ?
-                  (
-                    <SelectMovieRow
-                      key={item.id}
-                      id={item.id}
-                      title={item.title}
-                      year={item.year}
-                      onMovieSelect={onMovieSelect}
-                    />
-                  ) :
-                  null;
-              })
-            }
+          <Scroller
+            registerScroller={this.setScrollerRef}
+            className={styles.scroller}
+          >
+            <div>
+              {
+                showLoading || !scroller ?
+                  <LoadingIndicator /> :
+                  <VirtualTable
+                    header={
+                      <div />
+                    }
+                    items={suggestions}
+                    isSmallScreen={false}
+                    scroller={scroller}
+                    rowRenderer={this.rowRenderer}
+                  />
+              }
+            </div>
           </Scroller>
         </ModalBody>
 

frontend/src/InteractiveImport/Movie/SelectMovieModalContentConnector.js

@@ -4,24 +4,55 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { updateInteractiveImportItem } from 'Store/Actions/interactiveImportActions';
 import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
+import createDeepEqualSelector from 'Store/Selectors/createDeepEqualSelector';
 import SelectMovieModalContent from './SelectMovieModalContent';
 
-function createMapStateToProps() {
+function createCleanMovieSelector() {
   return createSelector(
     createAllMoviesSelector(),
     (items) => {
-      return {
-        items: [...items].sort((a, b) => {
-          if (a.sortTitle < b.sortTitle) {
-            return -1;
-          }
+      return items.map((movie) => {
+        const {
+          id,
+          title,
+          titleSlug,
+          sortTitle,
+          year,
+          images,
+          alternateTitles = []
+        } = movie;
+
+        return {
+          id,
+          title,
+          titleSlug,
+          sortTitle,
+          year,
+          images,
+          alternateTitles,
+          firstCharacter: title.charAt(0).toLowerCase()
+        };
+      }).sort((a, b) => {
+        if (a.sortTitle < b.sortTitle) {
+          return -1;
+        }
 
-          if (a.sortTitle > b.sortTitle) {
-            return 1;
-          }
+        if (a.sortTitle > b.sortTitle) {
+          return 1;
+        }
+
+        return 0;
+      });
+    }
+  );
+}
 
-          return 0;
-        })
+function createMapStateToProps() {
+  return createDeepEqualSelector(
+    createCleanMovieSelector(),
+    (movies) => {
+      return {
+        items: movies
       };
     }
   );

frontend/src/InteractiveImport/Movie/SelectMovieRow.css

@@ -1,4 +1,5 @@
 .movie {
   padding: 8px;
+  width: 100%;
   border-bottom: 1px solid $borderColor;
 }