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,21 +19,26 @@ import SocialDemoCallback from './pages/SocialDemoCallback';
 function AppRoutes() {
   return (
     <div className={styles.app}>
-      <Routes>
+      <Suspense fallback={<DelayedSuspenseFallback />}>
-        <Route path={GlobalAnonymousRoute.Callback} element={<Callback />} />
+        <Routes>
-        <Route path={GlobalAnonymousRoute.SocialDemoCallback} element={<SocialDemoCallback />} />
+          <Route path={GlobalAnonymousRoute.Callback} element={<Callback />} />
-        <Route element={<ProtectedRoutes />}>
+          <Route path={GlobalAnonymousRoute.SocialDemoCallback} element={<SocialDemoCallback />} />
-          <Route
+          <Route element={<ProtectedRoutes />}>
-            path={`${GlobalRoute.AcceptInvitation}/:invitationId`}
+            <Route
-            element={<AcceptInvitation />}
+              path={`${GlobalRoute.AcceptInvitation}/:invitationId`}
-          />
+              element={<AcceptInvitation />}
-          <Route path={GlobalRoute.Profile + '/*'} element={<Profile />} />
+            />
-          <Route path={GlobalRoute.HandleSocial} element={<HandleSocialCallback />} />
+            <Route path={GlobalRoute.Profile + '/*'} element={<Profile />} />
-          <Route path={GlobalRoute.CheckoutSuccessCallback} element={<CheckoutSuccessCallback />} />
+            <Route path={GlobalRoute.HandleSocial} element={<HandleSocialCallback />} />
-          <Route path={GlobalRoute.Onboarding + '/*'} element={<OnboardingApp />} />
+            <Route
-          <Route index element={<Main />} />
+              path={GlobalRoute.CheckoutSuccessCallback}
-        </Route>
+              element={<CheckoutSuccessCallback />}
-      </Routes>
+            />
+            <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 && (