diff --git a/website/src/components/Loader/index.js b/website/src/components/Loader/index.js index 9de4c41..e17a337 100644 --- a/website/src/components/Loader/index.js +++ b/website/src/components/Loader/index.js @@ -1,8 +1,19 @@ +import { useEffect, useState } from 'react'; import { connectStateResults } from 'react-instantsearch-dom' import { StyledLoader } from './styles' -const Loader = connectStateResults(({ isSearchStalled }) => - isSearchStalled ? : null -) +const SPINNER_DELAY = 200 // ms + +const Loader = connectStateResults(({ isSearchStalled }) => { + const [canShowSpinner, setCanShowSpinner] = useState(false) + + useEffect(() => { + setTimeout(() => { + setCanShowSpinner(true); + }, SPINNER_DELAY) + }, [canShowSpinner, setCanShowSpinner]) + + return canShowSpinner && isSearchStalled ? : null +}); export default Loader