Lazy Loading fuse-worker and fixed some potential timing issues

Fixes #1489
Fixes #1463

Co-Authored-By: Taloth <Taloth@users.noreply.github.com>

frontend/src/Components/Page/Header/ArtistSearchInput.css

@@ -4,15 +4,15 @@
 }
 
 .loading {
-  margin-top: 18px;
-  margin-bottom: 18px;
-  text-align: center;
+  position: absolute;
+  display: inline-block;
+  margin-left: 5px;
 }
 
 .ripple {
   composes: ripple from '~Components/Loading/LoadingIndicator.css';
 
-  border: 2px solid var(--toolbarColor);
+  border: 1px solid var(--toolbarColor);
 }
 
 .input {
@@ -91,7 +91,7 @@
 }
 
 .addNewArtistSuggestion {
-  padding: 0 3px;
+  padding: 5px 3px;
   cursor: pointer;
 }
 

frontend/src/Components/Page/Header/ArtistSearchInput.js

@@ -10,9 +10,7 @@ import ArtistSearchResult from './ArtistSearchResult';
 import FuseWorker from './fuse.worker';
 import styles from './ArtistSearchInput.css';
 
-const LOADING_TYPE = 'suggestionsLoading';
 const ADD_NEW_TYPE = 'addNew';
-const workerInstance = new FuseWorker();
 
 class ArtistSearchInput extends Component {
 
@@ -23,6 +21,7 @@ class ArtistSearchInput extends Component {
     super(props, context);
 
     this._autosuggest = null;
+    this._worker = null;
 
     this.state = {
       value: '',
@@ -32,7 +31,23 @@ class ArtistSearchInput extends Component {
 
   componentDidMount() {
     this.props.bindShortcut(shortcuts.ARTIST_SEARCH_INPUT.key, this.focusInput);
-    workerInstance.addEventListener('message', this.onSuggestionsReceived, false);
+  }
+
+  componentWillUnmount() {
+    if (this._worker) {
+      this._worker.removeEventListener('message', this.onSuggestionsReceived, false);
+      this._worker.terminate();
+      this._worker = null;
+    }
+  }
+
+  getWorker() {
+    if (!this._worker) {
+      this._worker = new FuseWorker();
+      this._worker.addEventListener('message', this.onSuggestionsReceived, false);
+    }
+
+    return this._worker;
   }
 
   //
@@ -55,6 +70,15 @@ class ArtistSearchInput extends Component {
     return (
       <div className={styles.sectionTitle}>
         {section.title}
+
+        {
+          section.loading &&
+            <LoadingIndicator
+              className={styles.loading}
+              rippleClassName={styles.ripple}
+              size={20}
+            />
+        }
       </div>
     );
   }
@@ -72,16 +96,6 @@ class ArtistSearchInput extends Component {
       );
     }
 
-    if (item.type === LOADING_TYPE) {
-      return (
-        <LoadingIndicator
-          className={styles.loading}
-          rippleClassName={styles.ripple}
-          size={30}
-        />
-      );
-    }
-
     return (
       <ArtistSearchResult
         {...item.item}
@@ -98,7 +112,8 @@ class ArtistSearchInput extends Component {
   reset() {
     this.setState({
       value: '',
-      suggestions: []
+      suggestions: [],
+      loading: false
     });
   }
 
@@ -114,6 +129,15 @@ class ArtistSearchInput extends Component {
   };
 
   onKeyDown = (event) => {
+    if (event.shiftKey || event.altKey || event.ctrlKey) {
+      return;
+    }
+
+    if (event.key === 'Escape') {
+      this.reset();
+      return;
+    }
+
     if (event.key !== 'Tab' && event.key !== 'Enter') {
       return;
     }
@@ -154,35 +178,74 @@ class ArtistSearchInput extends Component {
   };
 
   onSuggestionsFetchRequested = ({ value }) => {
+    if (!this.state.loading) {
       this.setState({
-      suggestions: [
-        {
-          type: LOADING_TYPE,
-          title: value
-        }
-      ]
+        loading: true
       });
+    }
+
     this.requestSuggestions(value);
   };
 
   requestSuggestions = _.debounce((value) => {
+    if (!this.state.loading) {
+      return;
+    }
+
+    const requestLoading = this.state.requestLoading;
+
+    this.setState({
+      requestValue: value,
+      requestLoading: true
+    });
+
+    if (!requestLoading) {
       const payload = {
         value,
         artists: this.props.artists
       };
 
-    workerInstance.postMessage(payload);
+      this.getWorker().postMessage(payload);
+    }
   }, 250);
 
   onSuggestionsReceived = (message) => {
+    const {
+      value,
+      suggestions
+    } = message.data;
+
+    if (!this.state.loading) {
       this.setState({
-      suggestions: message.data
+        requestValue: null,
+        requestLoading: false
       });
+    } else if (value === this.state.requestValue) {
+      this.setState({
+        suggestions,
+        requestValue: null,
+        requestLoading: false,
+        loading: false
+      });
+    } else {
+      this.setState({
+        suggestions,
+        requestLoading: true
+      });
+
+      const payload = {
+        value: this.state.requestValue,
+        artists: this.props.artists
+      };
+
+      this.getWorker().postMessage(payload);
+    }
   };
 
   onSuggestionsClearRequested = () => {
     this.setState({
-      suggestions: []
+      suggestions: [],
+      loading: false
     });
   };
 
@@ -200,14 +263,16 @@ class ArtistSearchInput extends Component {
   render() {
     const {
       value,
+      loading,
       suggestions
     } = this.state;
 
     const suggestionGroups = [];
 
-    if (suggestions.length) {
+    if (suggestions.length || loading) {
       suggestionGroups.push({
         title: 'Existing Artist',
+        loading,
         suggestions
       });
     }

frontend/src/Components/Page/Header/fuse.worker.js

@@ -3,9 +3,9 @@ import Fuse from 'fuse.js';
 const fuseOptions = {
   shouldSort: true,
   includeMatches: true,
+  ignoreLocation: true,
   threshold: 0.3,
-  location: 0,
-  distance: 100,
+  maxPatternLength: 32,
   minMatchCharLength: 1,
   keys: [
     'artistName',
@@ -47,7 +47,7 @@ function getSuggestions(artists, value) {
   return suggestions;
 }
 
-self.addEventListener('message', (e) => {
+onmessage = function(e) {
   if (!e) {
     return;
   }
@@ -57,5 +57,12 @@ self.addEventListener('message', (e) => {
     value
   } = e.data;
 
-  self.postMessage(getSuggestions(artists, value));
-});
+  const suggestions = getSuggestions(artists, value);
+
+  const results = {
+    value,
+    suggestions
+  };
+
+  self.postMessage(results);
+};