Fixed: Use a worker for UI fuzzy search

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

@@ -1,28 +1,18 @@
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Autosuggest from 'react-autosuggest';
-import Fuse from 'fuse.js';
 import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import keyboardShortcuts, { shortcuts } from 'Components/keyboardShortcuts';
 import ArtistSearchResult from './ArtistSearchResult';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FuseWorker from './fuse.worker';
 import styles from './ArtistSearchInput.css';
 
+const LOADING_TYPE = 'suggestionsLoading';
 const ADD_NEW_TYPE = 'addNew';
-
-const fuseOptions = {
-  shouldSort: true,
-  includeMatches: true,
-  threshold: 0.3,
-  location: 0,
-  distance: 100,
-  maxPatternLength: 32,
-  minMatchCharLength: 1,
-  keys: [
-    'artistName',
-    'tags.label'
-  ]
-};
+const workerInstance = new FuseWorker();
 
 class ArtistSearchInput extends Component {
 
@@ -42,6 +32,7 @@ class ArtistSearchInput extends Component {
 
   componentDidMount() {
     this.props.bindShortcut(shortcuts.ARTIST_SEARCH_INPUT.key, this.focusInput);
+    workerInstance.addEventListener('message', this.onSuggestionsReceived, false);
   }
 
   //
@@ -69,7 +60,7 @@ class ArtistSearchInput extends Component {
   }
 
   getSuggestionValue({ title }) {
-    return title || '';
+    return title;
   }
 
   renderSuggestion(item, { query }) {
@@ -81,6 +72,12 @@ class ArtistSearchInput extends Component {
       );
     }
 
+    if (item.type === LOADING_TYPE) {
+      return (
+        <LoadingIndicator />
+      );
+    }
+
     return (
       <ArtistSearchResult
         {...item.item}
@@ -113,7 +110,7 @@ class ArtistSearchInput extends Component {
   }
 
   onKeyDown = (event) => {
-    if (event.key !== 'Tab' && event.key !== 'Enter' || event.key !== 'ArrowDown' || event.key !== 'ArrowUp') {
+    if (event.key !== 'Tab' && event.key !== 'Enter') {
       return;
     }
 
@@ -127,7 +124,7 @@ class ArtistSearchInput extends Component {
       highlightedSuggestionIndex
     } = this._autosuggest.state;
 
-    if (!suggestions.length || highlightedSectionIndex && (event.key !== 'ArrowDown' || event.key !== 'ArrowUp')) {
+    if (!suggestions.length || suggestions[0].type === LOADING_TYPE || highlightedSectionIndex) {
       this.props.onGoToAddNewArtist(value);
       this._autosuggest.input.blur();
       this.reset();
@@ -138,7 +135,7 @@ class ArtistSearchInput extends Component {
     // If an suggestion is not selected go to the first artist,
     // otherwise go to the selected artist.
 
-    if (highlightedSuggestionIndex == null && (event.key !== 'ArrowDown' || event.key !== 'ArrowUp')) {
+    if (highlightedSuggestionIndex == null) {
       this.goToArtist(suggestions[0]);
     } else {
       this.goToArtist(suggestions[highlightedSuggestionIndex]);
@@ -153,10 +150,30 @@ class ArtistSearchInput extends Component {
   }
 
   onSuggestionsFetchRequested = ({ value }) => {
-    const fuse = new Fuse(this.props.artists, fuseOptions);
-    const suggestions = fuse.search(value).slice(0, 15);
+    this.setState({
+      suggestions: [
+        {
+          type: LOADING_TYPE,
+          title: value
+        }
+      ]
+    });
+    this.requestSuggestions(value);
+  };
 
-    this.setState({ suggestions });
+  requestSuggestions = _.debounce((value) => {
+    const payload = {
+      value,
+      artists: this.props.artists
+    };
+
+    workerInstance.postMessage(payload);
+  }, 250);
+
+  onSuggestionsReceived = (message) => {
+    this.setState({
+      suggestions: message.data
+    });
   }
 
   onSuggestionsClearRequested = () => {

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

@@ -0,0 +1,62 @@
+import Fuse from 'fuse.js';
+
+const fuseOptions = {
+  shouldSort: true,
+  includeMatches: true,
+  threshold: 0.3,
+  location: 0,
+  distance: 100,
+  maxPatternLength: 32,
+  minMatchCharLength: 1,
+  keys: [
+    'artistName',
+    'tags.label'
+  ]
+};
+
+function getSuggestions(artists, value) {
+  const limit = 10;
+  let suggestions = [];
+
+  if (value.length === 1) {
+    for (let i = 0; i < artists.length; i++) {
+      const s = artists[i];
+      if (s.firstCharacter === value.toLowerCase()) {
+        suggestions.push({
+          item: artists[i],
+          indices: [
+            [0, 0]
+          ],
+          matches: [
+            {
+              value: s.title,
+              key: 'title'
+            }
+          ],
+          arrayIndex: 0
+        });
+        if (suggestions.length > limit) {
+          break;
+        }
+      }
+    }
+  } else {
+    const fuse = new Fuse(artists, fuseOptions);
+    suggestions = fuse.search(value, { limit });
+  }
+
+  return suggestions;
+}
+
+self.addEventListener('message', (e) => {
+  if (!e) {
+    return;
+  }
+
+  const {
+    artists,
+    value
+  } = e.data;
+
+  self.postMessage(getSuggestions(artists, value));
+});