feat(routes): implement lazy loading and suspense fallback for route components

- Refactored account setup, admin center, reporting, and settings routes to utilize React's lazy loading for improved performance.
- Wrapped route components in Suspense with a fallback UI to enhance user experience during loading states.
- Removed unused drag-and-drop CSS file to clean up the codebase.
This commit is contained in:
chamikaJ
2025-07-03 10:34:06 +05:30
parent c19c1c2f34
commit e26f16bbc2
13 changed files with 104 additions and 79 deletions

View File

@@ -1,6 +1,8 @@
import { RouteObject } from 'react-router-dom';
import { Suspense } from 'react';
import ReportingLayout from '@/layouts/ReportingLayout';
import { ReportingMenuItems, reportingsItems } from '@/lib/reporting/reporting-constants';
import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
// function to flatten nested menu items
const flattenItems = (items: ReportingMenuItems[]): ReportingMenuItems[] => {
@@ -20,7 +22,11 @@ const reportingRoutes: RouteObject[] = [
element: <ReportingLayout />,
children: flattenedItems.map(item => ({
path: item.endpoint,
element: item.element,
element: (
<Suspense fallback={<SuspenseFallback />}>
{item.element}
</Suspense>
),
})),
},
];