fix(console): should be able to edit password and email in profile

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,6 +19,7 @@ import SocialDemoCallback from './pages/SocialDemoCallback';
 function AppRoutes() {
   return (
     <div className={styles.app}>
+      <Suspense fallback={<DelayedSuspenseFallback />}>
         <Routes>
           <Route path={GlobalAnonymousRoute.Callback} element={<Callback />} />
           <Route path={GlobalAnonymousRoute.SocialDemoCallback} element={<SocialDemoCallback />} />
@@ -27,11 +30,15 @@ function AppRoutes() {
             />
             <Route path={GlobalRoute.Profile + '/*'} element={<Profile />} />
             <Route path={GlobalRoute.HandleSocial} element={<HandleSocialCallback />} />
-          <Route path={GlobalRoute.CheckoutSuccessCallback} element={<CheckoutSuccessCallback />} />
+            <Route
+              path={GlobalRoute.CheckoutSuccessCallback}
+              element={<CheckoutSuccessCallback />}
+            />
             <Route path={GlobalRoute.Onboarding + '/*'} element={<OnboardingApp />} />
             <Route index element={<Main />} />
           </Route>
         </Routes>
+      </Suspense>
     </div>
   );
 }

packages/console/src/components/DelayedSuspenseFallback/index.module.scss

@@ -0,0 +1,6 @@
+.daisy {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}

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;

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 && (