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();