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