feat: implement lazy loading for routes

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,6 +32,7 @@ export default function App() {
   return (
     <BrowserRouter>
       <main className="min-h-screen bg-base-200 flex items-center justify-center w-full">
+        <Suspense fallback={<SplashScreen />}>
           <Routes>
             <Route path={ROUTES.HOME} element={<Home />} />
 
@@ -87,6 +88,7 @@ export default function App() {
             <Route path={ROUTES.READ} element={<Reader />} />
             <Route path="*" element={<Navigate to={ROUTES.HOME} replace />} />
           </Routes>
+        </Suspense>
       </main>
     </BrowserRouter>
   );