Files
worklenz/worklenz-frontend/src/app/routes/settings-routes.tsx
chamikaJ e26f16bbc2 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.
2025-07-03 10:34:06 +05:30

41 lines
1.1 KiB
TypeScript

import { RouteObject } from 'react-router-dom';
import { Navigate } from 'react-router-dom';
import { Suspense } from 'react';
import SettingsLayout from '@/layouts/SettingsLayout';
import { settingsItems } from '@/lib/settings/settings-constants';
import { useAuthService } from '@/hooks/useAuth';
import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
const SettingsGuard = ({
children,
adminRequired,
}: {
children: React.ReactNode;
adminRequired: boolean;
}) => {
const isOwnerOrAdmin = useAuthService().isOwnerOrAdmin();
if (adminRequired && !isOwnerOrAdmin) {
return <Navigate to="/worklenz/unauthorized" replace />;
}
return <>{children}</>;
};
const settingsRoutes: RouteObject[] = [
{
path: 'settings',
element: <SettingsLayout />,
children: settingsItems.map(item => ({
path: item.endpoint,
element: (
<Suspense fallback={<SuspenseFallback />}>
<SettingsGuard adminRequired={!!item.adminOnly}>{item.element}</SettingsGuard>
</Suspense>
),
})),
},
];
export default settingsRoutes;