From 44dde14306b7ad81096edb386ea29c64dda4bb39 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Fri, 26 Jul 2024 18:21:52 +0800
Subject: [PATCH] refactor(console): delay module loading suspense component
 display by 500ms

---
 .../src/containers/ConsoleContent/index.tsx   | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx
index d063da006ec..30a1c4bad3f 100644
--- a/packages/console/src/containers/ConsoleContent/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/index.tsx
@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import { useOutletContext, useRoutes } from 'react-router-dom';
 import { safeLazy } from 'react-safe-lazy';
 
@@ -15,8 +15,30 @@ import { Skeleton } from './Sidebar';
 import useTenantScopeListener from './hooks';
 import styles from './index.module.scss';
 
+const suspenseDisplayTimeout = 500; // Milliseconds
 const Sidebar = safeLazy(async () => import('./Sidebar'));
 
+function SuspenseFallback() {
+  const [showSpinner, setShowSpinner] = useState(false);
+
+  useEffect(() => {
+    const timeout = window.setTimeout(() => {
+      setShowSpinner(true);
+    }, suspenseDisplayTimeout);
+
+    return () => {
+      clearTimeout(timeout);
+      setShowSpinner(false);
+    };
+  }, []);
+
+  if (showSpinner) {
+    return <Daisy className={styles.daisy} />;
+  }
+
+  return null;
+}
+
 function ConsoleContent() {
   const { scrollableContent } = useOutletContext<AppContentOutletContext>();
   const routeObjects = useConsoleRoutes();
@@ -33,7 +55,7 @@ function ConsoleContent() {
       </Suspense>
       <OverlayScrollbar className={styles.overlayScrollbarWrapper}>
         <div ref={scrollableContent} className={styles.main}>
-          <Suspense fallback={<Daisy className={styles.daisy} />}>{routes}</Suspense>
+          <Suspense fallback={<SuspenseFallback />}>{routes}</Suspense>
         </div>
       </OverlayScrollbar>
       {isDevFeaturesEnabled && (