diff --git a/frontend/src/Components/Loading/LoadingIndicator.js b/frontend/src/Components/Loading/LoadingIndicator.js index 5f9a15b1a..60f692a45 100644 --- a/frontend/src/Components/Loading/LoadingIndicator.js +++ b/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 }} >
@@ -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 }; diff --git a/frontend/src/Components/Page/Header/MovieSearchInput.css b/frontend/src/Components/Page/Header/MovieSearchInput.css index c9561d8e9..153dd750f 100644 --- a/frontend/src/Components/Page/Header/MovieSearchInput.css +++ b/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; diff --git a/frontend/src/Components/Page/Header/MovieSearchInput.js b/frontend/src/Components/Page/Header/MovieSearchInput.js index 2607a49a1..4b06a9f63 100644 --- a/frontend/src/Components/Page/Header/MovieSearchInput.js +++ b/frontend/src/Components/Page/Header/MovieSearchInput.js @@ -74,7 +74,11 @@ class MovieSearchInput extends Component { if (item.type === LOADING_TYPE) { return ( - + ); } @@ -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(); diff --git a/package.json b/package.json index b0fde6bb6..0c13ea9b4 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 0f2f02781..c3968f4fe 100644 --- a/yarn.lock +++ b/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: - version "5.1.0" - resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-5.1.0.tgz#192a670e48bc3ac0247cf9a61590714ab991f7a8" - integrity sha512-R8nPr9tQx0HdjRJsqkESimL7o/2Xe0/Lw0cMBrBjkAKAJFq6D6u/o3obteqxkvOJNEgS4xPP78dxoNMaCWNoGg== +fuse.js@6.0.4: + version "6.0.4" + resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.0.4.tgz#9f5af976f836247ad5d2c338090d6ce13cf9a4d2" + integrity sha512-XAeQaT+DV8dxqohN911+Qzkb4iMzTzae04mdb9/XSQbMjbsFasQxe0+UwM+3UWP+8vO7svz1Rj0KuQw6xJ45Ww== gensync@^1.0.0-beta.1: version "1.0.0-beta.1"