From bcaa9fde3974feaa0a15050643f2a92a2a72c7cf Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 19 Jan 2022 17:31:53 +0700
Subject: [PATCH] (nextjs) added timeout for loader

---
 .../common/LoadingProgress/index.tsx          |  2 +-
 src/hooks/dom/useSSRLoadingIndicator.ts       | 29 ++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/common/LoadingProgress/index.tsx b/src/components/common/LoadingProgress/index.tsx
index 919f2c05..004dcccd 100644
--- a/src/components/common/LoadingProgress/index.tsx
+++ b/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 ? (
     <>
diff --git a/src/hooks/dom/useSSRLoadingIndicator.ts b/src/hooks/dom/useSSRLoadingIndicator.ts
index d68c972f..25c13ae1 100644
--- a/src/hooks/dom/useSSRLoadingIndicator.ts
+++ b/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));
-    Router.events.on('routeChangeComplete', () => setShown(false));
-    Router.events.on('routeChangeError', () => setShown(false));
+    let timeout;
+
+    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;