From a8d26a00d7d7385507199b2e7b88085bbede51fc Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Wed, 14 Aug 2024 18:59:57 +0800
Subject: [PATCH] fix(console): should be able to edit password and email in
 profile

---
 packages/console/src/cloud/AppRoutes.tsx      | 37 +++++++++++--------
 .../DelayedSuspenseFallback/index.module.scss |  6 +++
 .../DelayedSuspenseFallback/index.tsx         | 33 +++++++++++++++++
 .../src/containers/ConsoleContent/index.tsx   | 27 ++------------
 4 files changed, 64 insertions(+), 39 deletions(-)
 create mode 100644 packages/console/src/components/DelayedSuspenseFallback/index.module.scss
 create mode 100644 packages/console/src/components/DelayedSuspenseFallback/index.tsx

diff --git a/packages/console/src/cloud/AppRoutes.tsx b/packages/console/src/cloud/AppRoutes.tsx
index 2e49878cf..efc0cda94 100644
--- a/packages/console/src/cloud/AppRoutes.tsx
+++ b/packages/console/src/cloud/AppRoutes.tsx
@@ -1,5 +1,7 @@
+import { Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
+import DelayedSuspenseFallback from '@/components/DelayedSuspenseFallback';
 import ProtectedRoutes from '@/containers/ProtectedRoutes';
 import { GlobalAnonymousRoute, GlobalRoute } from '@/contexts/TenantsProvider';
 import { OnboardingApp } from '@/onboarding';
@@ -17,21 +19,26 @@ import SocialDemoCallback from './pages/SocialDemoCallback';
 function AppRoutes() {
   return (
     <div className={styles.app}>
-      <Routes>
-        <Route path={GlobalAnonymousRoute.Callback} element={<Callback />} />
-        <Route path={GlobalAnonymousRoute.SocialDemoCallback} element={<SocialDemoCallback />} />
-        <Route element={<ProtectedRoutes />}>
-          <Route
-            path={`${GlobalRoute.AcceptInvitation}/:invitationId`}
-            element={<AcceptInvitation />}
-          />
-          <Route path={GlobalRoute.Profile + '/*'} element={<Profile />} />
-          <Route path={GlobalRoute.HandleSocial} element={<HandleSocialCallback />} />
-          <Route path={GlobalRoute.CheckoutSuccessCallback} element={<CheckoutSuccessCallback />} />
-          <Route path={GlobalRoute.Onboarding + '/*'} element={<OnboardingApp />} />
-          <Route index element={<Main />} />
-        </Route>
-      </Routes>
+      <Suspense fallback={<DelayedSuspenseFallback />}>
+        <Routes>
+          <Route path={GlobalAnonymousRoute.Callback} element={<Callback />} />
+          <Route path={GlobalAnonymousRoute.SocialDemoCallback} element={<SocialDemoCallback />} />
+          <Route element={<ProtectedRoutes />}>
+            <Route
+              path={`${GlobalRoute.AcceptInvitation}/:invitationId`}
+              element={<AcceptInvitation />}
+            />
+            <Route path={GlobalRoute.Profile + '/*'} element={<Profile />} />
+            <Route path={GlobalRoute.HandleSocial} element={<HandleSocialCallback />} />
+            <Route
+              path={GlobalRoute.CheckoutSuccessCallback}
+              element={<CheckoutSuccessCallback />}
+            />
+            <Route path={GlobalRoute.Onboarding + '/*'} element={<OnboardingApp />} />
+            <Route index element={<Main />} />
+          </Route>
+        </Routes>
+      </Suspense>
     </div>
   );
 }
diff --git a/packages/console/src/components/DelayedSuspenseFallback/index.module.scss b/packages/console/src/components/DelayedSuspenseFallback/index.module.scss
new file mode 100644
index 000000000..1582c9cac
--- /dev/null
+++ b/packages/console/src/components/DelayedSuspenseFallback/index.module.scss
@@ -0,0 +1,6 @@
+.daisy {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/packages/console/src/components/DelayedSuspenseFallback/index.tsx b/packages/console/src/components/DelayedSuspenseFallback/index.tsx
new file mode 100644
index 000000000..33969caed
--- /dev/null
+++ b/packages/console/src/components/DelayedSuspenseFallback/index.tsx
@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+
+import { Daisy } from '@/ds-components/Spinner';
+
+import styles from './index.module.scss';
+
+const suspenseDisplayTimeout = 500; // Milliseconds
+
+/**
+ * Displays a spinner after a short delay (500ms) to prevent flashing
+ * @returns {JSX.Element} The spinner
+ */
+function DelayedSuspenseFallback() {
+  const [showSpinner, setShowSpinner] = useState(false);
+
+  useEffect(() => {
+    const timeout = window.setTimeout(() => {
+      setShowSpinner(true);
+    }, suspenseDisplayTimeout);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  if (showSpinner) {
+    return <Daisy className={styles.daisy} />;
+  }
+
+  return null;
+}
+
+export default DelayedSuspenseFallback;
diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx
index 78fb114a7..e1ca78420 100644
--- a/packages/console/src/containers/ConsoleContent/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/index.tsx
@@ -1,10 +1,10 @@
-import { Suspense, useEffect, useState } from 'react';
+import { Suspense } from 'react';
 import { useOutletContext, useRoutes } from 'react-router-dom';
 import { safeLazy } from 'react-safe-lazy';
 
+import DelayedSuspenseFallback from '@/components/DelayedSuspenseFallback';
 import { isDevFeaturesEnabled } from '@/consts/env';
 import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
-import { Daisy } from '@/ds-components/Spinner';
 import Tag from '@/ds-components/Tag';
 import { useConsoleRoutes } from '@/hooks/use-console-routes';
 import { usePlausiblePageview } from '@/hooks/use-plausible-pageview';
@@ -15,29 +15,8 @@ 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);
-    };
-  }, []);
-
-  if (showSpinner) {
-    return <Daisy className={styles.daisy} />;
-  }
-
-  return null;
-}
-
 function ConsoleContent() {
   const { scrollableContent } = useOutletContext<AppContentOutletContext>();
   const routeObjects = useConsoleRoutes();
@@ -54,7 +33,7 @@ function ConsoleContent() {
       </Suspense>
       <OverlayScrollbar className={styles.overlayScrollbarWrapper}>
         <div ref={scrollableContent} className={styles.main}>
-          <Suspense fallback={<SuspenseFallback />}>{routes}</Suspense>
+          <Suspense fallback={<DelayedSuspenseFallback />}>{routes}</Suspense>
         </div>
       </OverlayScrollbar>
       {isDevFeaturesEnabled && (