feat: lazy loading to pages

Author: sunjay-dev

Frontend/src/pages/index.ts

@@ -11,7 +11,7 @@ import EditJob from './EditJob';
 import NotFoundPage from './NotFoundPage';
 import ForgotPassword from './ForgotPassword';
 import ResetPassword from './ResetPassword';
-import VerifyEmail from './verifyEmail';
+import VerifyEmail from './VerifyEmail';
 import PrivacyPolicy from './PrivacyPolicy';
 import Terms from './Terms';
 export { Home, Login, Signup, Dashboard, CreateJob, Jobs, EditJob, Logs, VerifyEmail, ForgotPassword, ResetPassword, NotFoundPage, JobLogs, Settings, PrivacyPolicy, Terms }

Frontend/src/routes.tsx

@@ -1,18 +1,52 @@
+import { lazy, Suspense } from "react";
 import { createBrowserRouter } from "react-router-dom";
-import { Home, Login, Signup, Dashboard, CreateJob, Jobs, ResetPassword, EditJob, Logs, JobLogs, Settings, NotFoundPage, ForgotPassword, VerifyEmail, PrivacyPolicy, Terms } from "./pages";
-import { Layout, ProtectedRoute, PublicRoute } from "./components";
+import { Home, Login, Signup, Dashboard, CreateJob, Jobs, EditJob, Logs, JobLogs, Settings, NotFoundPage, ForgotPassword } from "./pages";
+import { Layout, ProtectedRoute, PublicRoute, Loader } from "./components";
+
+const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy"));
+const Terms = lazy(() => import("./pages/Terms"));
+const VerifyEmail = lazy(() => import("./pages/VerifyEmail"));
+const ResetPassword = lazy(() => import("./pages/ResetPassword"));
 
 export const router = createBrowserRouter([
   { path: "/", element: <Home /> },
-  { path: "/privacy-policy", element: <PrivacyPolicy /> },
-  { path: "/terms", element: <Terms /> },
 
+  {
+    path: "/privacy-policy",
+    element: (
+      <Suspense fallback={<Loader />}>
+        <PrivacyPolicy />
+      </Suspense>
+    ),
+  },
+  {
+    path: "/terms",
+    element: (
+      <Suspense fallback={<Loader />}>
+        <Terms />
+      </Suspense>
+    ),
+  },
   { path: "/login", element: <PublicRoute><Login /></PublicRoute> },
   { path: "/signup", element: <PublicRoute><Signup /></PublicRoute> },
   { path: "/forgot-password", element: <PublicRoute><ForgotPassword /></PublicRoute> },
 
-  { path: "/verify-email/:userId", element: <VerifyEmail /> },
-  { path: "/reset-password/:token", element: <ResetPassword /> },
+  {
+    path: "/verify-email/:userId",
+    element: (
+      <Suspense fallback={<Loader />}>
+        <VerifyEmail />
+      </Suspense>
+    ),
+  },
+  {
+    path: "/reset-password/:token",
+    element: (
+      <Suspense fallback={<Loader />}>
+        <ResetPassword />
+      </Suspense>
+    ),
+  },
 
   {
     element: <ProtectedRoute />,
@@ -27,10 +61,10 @@ export const router = createBrowserRouter([
           { path: "/job/:jobId/edit", element: <EditJob /> },
           { path: "/logs", element: <Logs /> },
           { path: "/settings", element: <Settings /> },
-        ]
-      }
-    ]
+        ],
+      },
+    ],
   },
 
-  { path: "*", element: <NotFoundPage /> }
+  { path: "*", element: <NotFoundPage /> },
 ]);