(nextjs) added timeout for loader

src/components/common/LoadingProgress/index.tsx

@@ -7,7 +7,7 @@ import styles from './styles.module.scss';
 interface LoadingProgressProps {}
 
 const LoadingProgress: VFC<LoadingProgressProps> = () => {
-  const shown = useSSRLoadingIndicator();
+  const shown = useSSRLoadingIndicator(300);
 
   return shown ? (
     <>

src/hooks/dom/useSSRLoadingIndicator.ts

@@ -2,13 +2,34 @@ import { useEffect, useState } from 'react';
 
 import Router from 'next/router';
 
-export const useSSRLoadingIndicator = () => {
+/** decides to show loader on SSR loading */
+export const useSSRLoadingIndicator = (delay = 0) => {
   const [shown, setShown] = useState(false);
 
   useEffect(() => {
-    Router.events.on('routeChangeStart', () => setShown(true));
+    let timeout;
-    Router.events.on('routeChangeComplete', () => setShown(false));
+
-    Router.events.on('routeChangeError', () => setShown(false));
+    const show = () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+
+      timeout = setTimeout(() => {
+        setShown(true);
+      }, delay);
+    };
+
+    const hide = () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+
+      setShown(false);
+    };
+
+    Router.events.on('routeChangeStart', show);
+    Router.events.on('routeChangeComplete', hide);
+    Router.events.on('routeChangeError', hide);
   }, []);
 
   return shown;