Fixed: Update Fuse to allow search over 32 without crash

frontend/src/Components/Loading/LoadingIndicator.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './LoadingIndicator.css';
 
-function LoadingIndicator({ className, size }) {
+function LoadingIndicator({ className, rippleClassName, size }) {
   const sizeInPx = `${size}px`;
   const width = sizeInPx;
   const height = sizeInPx;
@@ -17,17 +17,17 @@ function LoadingIndicator({ className, size }) {
         style={{ width, height }}
       >
         <div
-          className={styles.ripple}
+          className={rippleClassName}
           style={{ width, height }}
         />
 
         <div
-          className={styles.ripple}
+          className={rippleClassName}
           style={{ width, height }}
         />
 
         <div
-          className={styles.ripple}
+          className={rippleClassName}
           style={{ width, height }}
         />
       </div>
@@ -37,11 +37,13 @@ function LoadingIndicator({ className, size }) {
 
 LoadingIndicator.propTypes = {
   className: PropTypes.string,
+  rippleClassName: PropTypes.string,
   size: PropTypes.number
 };
 
 LoadingIndicator.defaultProps = {
   className: styles.loading,
+  rippleClassName: styles.ripple,
   size: 50
 };
 

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

@@ -3,6 +3,18 @@
   align-items: center;
 }
 
+.loading {
+  margin-top: 18px;
+  margin-bottom: 18px;
+  text-align: center;
+}
+
+.ripple {
+  composes: ripple from '~Components/Loading/LoadingIndicator.css';
+
+  border: 2px solid $toolbarColor;
+}
+
 .input {
   margin-left: 8px;
   width: 200px;

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

@@ -74,7 +74,11 @@ class MovieSearchInput extends Component {
 
     if (item.type === LOADING_TYPE) {
       return (
-        <LoadingIndicator />
+        <LoadingIndicator
+          className={styles.loading}
+          rippleClassName={styles.ripple}
+          size={30}
+        />
       );
     }
 
@@ -124,7 +128,7 @@ class MovieSearchInput extends Component {
       highlightedSuggestionIndex
     } = this._autosuggest.state;
 
-    if (!suggestions.length || suggestions[0].type === LOADING_TYPE || highlightedSectionIndex) {
+    if (!suggestions.length || highlightedSectionIndex) {
       this.props.onGoToAddNewMovie(value);
       this._autosuggest.input.blur();
       this.reset();

package.json

@@ -58,7 +58,7 @@
     "esprint": "0.7.0",
     "file-loader": "6.0.0",
     "filesize": "6.1.0",
-    "fuse.js": "5.1.0",
+    "fuse.js": "6.0.4",
     "gulp": "4.0.2",
     "gulp-cached": "1.1.1",
     "gulp-concat": "2.6.1",

yarn.lock

@@ -4052,10 +4052,10 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-fuse.js@5.1.0:
+fuse.js@6.0.4:
-  version "5.1.0"
+  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-5.1.0.tgz#192a670e48bc3ac0247cf9a61590714ab991f7a8"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.0.4.tgz#9f5af976f836247ad5d2c338090d6ce13cf9a4d2"
-  integrity sha512-R8nPr9tQx0HdjRJsqkESimL7o/2Xe0/Lw0cMBrBjkAKAJFq6D6u/o3obteqxkvOJNEgS4xPP78dxoNMaCWNoGg==
+  integrity sha512-XAeQaT+DV8dxqohN911+Qzkb4iMzTzae04mdb9/XSQbMjbsFasQxe0+UwM+3UWP+8vO7svz1Rj0KuQw6xJ45Ww==
 
 gensync@^1.0.0-beta.1:
   version "1.0.0-beta.1"