Merge pull request #24 from TaylorClay/fix-spinner-flashing

Fix #23
jrgarciadev · May 23, 2022 · 75c9b5a · 75c9b5a · vercel · May 23, 2022
2 parents 2750987 + d7091e8
commit 75c9b5a
Showing 1 changed file with 14 additions and 3 deletions.
diff --git 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 ? <StyledLoader /> : 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 ? <StyledLoader /> : null
+});
 
 export default Loader