From fcf56dffc75ef385c025b2a744be59a5bd7fb5ea Mon Sep 17 00:00:00 2001
From: Sajad Mirjalili <sajadmrjll@gmail.com>
Date: Mon, 29 Sep 2025 11:47:11 +0330
Subject: [PATCH] fix: loading only outlet instead of whole page for child
 subroutes

---
 src/components/layout/Layout.tsx |  7 +++++--
 src/components/layout/type.ts    |  0
 src/routes/index.tsx             | 15 ++++-----------
 3 files changed, 9 insertions(+), 13 deletions(-)
 delete mode 100644 src/components/layout/type.ts

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index befcc88..3e02947 100644
--- a/src/components/layout/Layout.tsx
+++ b/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>
 
diff --git a/src/components/layout/type.ts b/src/components/layout/type.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 43888d8..ef190b8 100644
--- a/src/routes/index.tsx
+++ b/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>;