amir/Account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sajad Mirjalili
2025-09-29 11:47:11 +03:30
parent ac9a1a3a10
commit fcf56dffc7
3 changed files with 9 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/routes/index.tsx
View File

@@ -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>;