fix: loading only outlet instead of whole page for child subroutes

src/components/layout/Layout.tsx

@@ -4,9 +4,10 @@ import { appRoutes } from '@/routes/config';
 import { Outlet, useLocation } from 'react-router-dom';
 import { Box, useMediaQuery, useTheme } from '@mui/material';
 import { Header } from './Header';
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import { Toolbar } from './Toolbar';
 import { useAuth } from '@/hooks/useAuth';
+import { Loading } from '../routes/Loading';
 
 export const Layout = () => {
   const navItemConfigs = buildNavItems(appRoutes);
@@ -53,7 +54,9 @@ export const Layout = () => {
               overflowInline: 'auto',
             }}
           >
-            <Outlet />
+            <Suspense fallback={<Loading />}>
+              <Outlet />
+            </Suspense>
           </Box>
         </Box>
 

src/routes/index.tsx

@@ -1,8 +1,7 @@
-import { Suspense, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { createBrowserRouter, type RouteObject } from 'react-router-dom';
 import { appRoutes, type RouteConfig } from './config';
 import { ProtectedRoute } from '@/components/routes/ProtectedRoute';
-import { Loading } from '@/components/routes/Loading';
 
 /**
  * A recursive function to map our custom route config to the format
@@ -10,15 +9,9 @@ import { Loading } from '@/components/routes/Loading';
  */
 function mapRoutes(routes: RouteConfig[]): RouteObject[] {
   return routes.map((route) => {
-    // Start with the base element, wrapped in Suspense for lazy loading
-    let element: ReactNode = (
-      <Suspense fallback={<Loading />}>{route.element}</Suspense>
-    );
-
-    // Conditionally wrap the element in the specified layout
-    // if (route.layout) {
-    //   element = <route.layout>{element}</route.layout>;
-    // }
+    // Remove the suspense from here and move to layout outlet
+    // Avoid loading layout for rendering different children
+    let element: ReactNode = route.element;
 
     if (route.authorize) {
       element = <ProtectedRoute>{element}</ProtectedRoute>;