From 11b9e8b04cda8acc50d4a0d1e6bf24ef8ae3a8ea Mon Sep 17 00:00:00 2001
From: ramvignesh-b <ramvignesh-b@github.com>
Date: Wed, 22 Apr 2026 16:38:17 +0530
Subject: [PATCH] feat: implement lazy loading for routes

---
 frontend/src/App.tsx | 128 ++++++++++++++++++++++---------------------
 1 file changed, 65 insertions(+), 63 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 978c883..96e5738 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,21 +1,21 @@
-import { useEffect } from "react";
+import { lazy, Suspense, useEffect } from "react";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import { ProtectedRoute, PublicRoute } from "./components/RouteGuards";
 import SplashScreen from "./components/SplashScreen";
 import { ROUTES } from "./config/routes";
 import { useAuth } from "./hooks/useAuth";
-import Activate from "./pages/Activate";
-import Drawer from "./pages/Drawer";
-import Editor from "./pages/Editor";
-// Pages
-import Home from "./pages/Home";
-import Login from "./pages/Login";
-import Reader from "./pages/Reader";
-import Register from "./pages/Register";
-import VerifyEmail from "./pages/VerifyEmail";
 
 let authInitialized = false;
 
+const Activate = lazy(() => import("./pages/Activate"));
+const Drawer = lazy(() => import("./pages/Drawer"));
+const Editor = lazy(() => import("./pages/Editor"));
+const Home = lazy(() => import("./pages/Home"));
+const Login = lazy(() => import("./pages/Login"));
+const Reader = lazy(() => import("./pages/Reader"));
+const Register = lazy(() => import("./pages/Register"));
+const VerifyEmail = lazy(() => import("./pages/VerifyEmail"));
+
 export default function App() {
   const { initialize, isInitializing } = useAuth();
 
@@ -32,61 +32,63 @@ export default function App() {
   return (
     <BrowserRouter>
       <main className="min-h-screen bg-base-200 flex items-center justify-center w-full">
-        <Routes>
-          <Route path={ROUTES.HOME} element={<Home />} />
+        <Suspense fallback={<SplashScreen />}>
+          <Routes>
+            <Route path={ROUTES.HOME} element={<Home />} />
 
-          <Route
-            path={ROUTES.ONBOARD}
-            element={
-              <PublicRoute>
-                <Register />
-              </PublicRoute>
-            }
-          />
-          <Route
-            path={ROUTES.LOGIN}
-            element={
-              <PublicRoute>
-                <Login />
-              </PublicRoute>
-            }
-          />
-          <Route
-            path={ROUTES.VERIFY_EMAIL}
-            element={
-              <PublicRoute>
-                <VerifyEmail />
-              </PublicRoute>
-            }
-          />
-          <Route
-            path={ROUTES.ACTIVATE}
-            element={
-              <PublicRoute>
-                <Activate />
-              </PublicRoute>
-            }
-          />
+            <Route
+              path={ROUTES.ONBOARD}
+              element={
+                <PublicRoute>
+                  <Register />
+                </PublicRoute>
+              }
+            />
+            <Route
+              path={ROUTES.LOGIN}
+              element={
+                <PublicRoute>
+                  <Login />
+                </PublicRoute>
+              }
+            />
+            <Route
+              path={ROUTES.VERIFY_EMAIL}
+              element={
+                <PublicRoute>
+                  <VerifyEmail />
+                </PublicRoute>
+              }
+            />
+            <Route
+              path={ROUTES.ACTIVATE}
+              element={
+                <PublicRoute>
+                  <Activate />
+                </PublicRoute>
+              }
+            />
 
-          <Route
-            path={ROUTES.DRAWER}
-            element={
-              <ProtectedRoute>
-                <Drawer />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path={ROUTES.WRITE}
-            element={
-              <ProtectedRoute>
-                <Editor />
-              </ProtectedRoute>
-            }
-          />
-          <Route path={ROUTES.READ} element={<Reader />} />
-          <Route path="*" element={<Navigate to={ROUTES.HOME} replace />} />
-        </Routes>
+            <Route
+              path={ROUTES.DRAWER}
+              element={
+                <ProtectedRoute>
+                  <Drawer />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path={ROUTES.WRITE}
+              element={
+                <ProtectedRoute>
+                  <Editor />
+                </ProtectedRoute>
+              }
+            />
+            <Route path={ROUTES.READ} element={<Reader />} />
+            <Route path="*" element={<Navigate to={ROUTES.HOME} replace />} />
+          </Routes>
+        </Suspense>
       </main>
     </BrowserRouter>
   );