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.

worklenz-frontend/src/app/routes/account-setup-routes.tsx

@@ -1,9 +1,15 @@
 import { RouteObject } from 'react-router-dom';
-import AccountSetup from '@/pages/account-setup/account-setup';
+import { lazy, Suspense } from 'react';
+import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
+const AccountSetup = lazy(() => import('@/pages/account-setup/account-setup'));
 
 const accountSetupRoute: RouteObject = {
   path: '/worklenz/setup',
-  element: <AccountSetup />,
+  element: (
+    <Suspense fallback={<SuspenseFallback />}>
+      <AccountSetup />
+    </Suspense>
+  ),
 };
 
 export default accountSetupRoute;

worklenz-frontend/src/app/routes/admin-center-routes.tsx

@@ -1,8 +1,10 @@
 import { RouteObject } from 'react-router-dom';
+import { Suspense } from 'react';
 import AdminCenterLayout from '@/layouts/admin-center-layout';
 import { adminCenterItems } from '@/pages/admin-center/admin-center-constants';
 import { Navigate } from 'react-router-dom';
 import { useAuthService } from '@/hooks/useAuth';
+import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
 
 const AdminCenterGuard = ({ children }: { children: React.ReactNode }) => {
   const isOwnerOrAdmin = useAuthService().isOwnerOrAdmin();
@@ -24,7 +26,11 @@ const adminCenterRoutes: RouteObject[] = [
     ),
     children: adminCenterItems.map(item => ({
       path: item.endpoint,
-      element: item.element,
+      element: (
+        <Suspense fallback={<SuspenseFallback />}>
+          {item.element}
+        </Suspense>
+      ),
     })),
   },
 ];

worklenz-frontend/src/app/routes/reporting-routes.tsx

@@ -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>
+      ),
     })),
   },
 ];

worklenz-frontend/src/app/routes/settings-routes.tsx

@@ -1,8 +1,10 @@
 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,
@@ -26,7 +28,11 @@ const settingsRoutes: RouteObject[] = [
     element: <SettingsLayout />,
     children: settingsItems.map(item => ({
       path: item.endpoint,
-      element: <SettingsGuard adminRequired={!!item.adminOnly}>{item.element}</SettingsGuard>,
+      element: (
+        <Suspense fallback={<SuspenseFallback />}>
+          <SettingsGuard adminRequired={!!item.adminOnly}>{item.element}</SettingsGuard>
+        </Suspense>
+      ),
     })),
   },
 ];