From 4607e79b8bffeebe95839890a73858146e09c13f Mon Sep 17 00:00:00 2001
From: Thibault Pouch <thibault.pouch@epitech.eu>
Date: Fri, 27 Feb 2026 10:22:37 +0100
Subject: [PATCH] feat: implement lazy loading for LoginPage and add Suspense
 to IntranetLayout

---
 nest-intra/src/App.tsx                        | 57 ++++++++++---------
 .../src/components/layout/IntranetLayout.tsx  | 18 ++++--
 2 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/nest-intra/src/App.tsx b/nest-intra/src/App.tsx
index 1a5597c..066dacc 100644
--- a/nest-intra/src/App.tsx
+++ b/nest-intra/src/App.tsx
@@ -20,35 +20,40 @@ const IntranetModeration   = lazy(() => import('./pages/intranet/IntranetModerat
 export default function App() {
   return (
     <AuthProvider>
-      <Suspense fallback={<PageLoader />}>
-        <Routes>
-          {/* Login */}
-          <Route path="/login" element={<LoginPage />} />
+      <Routes>
+        {/* Login — own Suspense so the full-page loader only shows here */}
+        <Route
+          path="/login"
+          element={
+            <Suspense fallback={<PageLoader />}>
+              <LoginPage />
+            </Suspense>
+          }
+        />
 
-          {/* Intranet (staff only) */}
-          <Route
-            path="/intranet"
-            element={
-              <ProtectedRoute staffOnly redirectTo="/login">
-                <IntranetLayout />
-              </ProtectedRoute>
-            }
-          >
-            <Route index element={<IntranetDashboard />} />
-            <Route path="bugs" element={<IntranetBugs />} />
-            <Route path="feed" element={<IntranetFeed />} />
-            <Route path="events" element={<IntranetEvents />} />
-            <Route path="users" element={<IntranetUsers />} />
-            <Route path="moderation" element={<IntranetModeration />} />
-          </Route>
+        {/* Intranet (staff only) — Suspense is inside IntranetLayout */}
+        <Route
+          path="/intranet"
+          element={
+            <ProtectedRoute staffOnly redirectTo="/login">
+              <IntranetLayout />
+            </ProtectedRoute>
+          }
+        >
+          <Route index element={<IntranetDashboard />} />
+          <Route path="bugs" element={<IntranetBugs />} />
+          <Route path="feed" element={<IntranetFeed />} />
+          <Route path="events" element={<IntranetEvents />} />
+          <Route path="users" element={<IntranetUsers />} />
+          <Route path="moderation" element={<IntranetModeration />} />
+        </Route>
 
-          {/* Redirect root to intranet */}
-          <Route path="/" element={<Navigate to="/intranet" replace />} />
+        {/* Redirect root to intranet */}
+        <Route path="/" element={<Navigate to="/intranet" replace />} />
 
-          {/* Catch-all: redirect to intranet */}
-          <Route path="*" element={<Navigate to="/intranet" replace />} />
-        </Routes>
-      </Suspense>
+        {/* Catch-all: redirect to intranet */}
+        <Route path="*" element={<Navigate to="/intranet" replace />} />
+      </Routes>
     </AuthProvider>
   );
 }
diff --git a/nest-intra/src/components/layout/IntranetLayout.tsx b/nest-intra/src/components/layout/IntranetLayout.tsx
index 52bf4a0..74fa19b 100644
--- a/nest-intra/src/components/layout/IntranetLayout.tsx
+++ b/nest-intra/src/components/layout/IntranetLayout.tsx
@@ -1,6 +1,6 @@
 import { NavLink, Outlet, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
-import { useCallback } from 'react';
+import { useCallback, Suspense } from 'react';
 
 const INTRANET_LINKS = [
   { to: '/intranet',            label: 'Dashboard',   icon: '[>]', end: true },
@@ -21,7 +21,7 @@ export function IntranetLayout() {
   }, [logout, navigate]);
 
   return (
-    <div style={{ display: 'flex', minHeight: '100vh', background: 'var(--color-bg)' }}>
+    <div style={{ display: 'flex', height: '100vh', overflow: 'hidden', background: 'var(--color-bg)' }}>
       {/* Sidebar */}
       <aside
         style={{
@@ -141,9 +141,19 @@ export function IntranetLayout() {
         </div>
       </aside>
 
-      {/* Main content */}
+      {/* Main content — only this area scrolls */}
       <main style={{ flex: 1, overflowY: 'auto', padding: '2rem', background: 'var(--color-bg)' }}>
-        <Outlet />
+        <Suspense
+          fallback={
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+              <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.8rem', letterSpacing: '0.1em' }}>
+                LOADING...
+              </div>
+            </div>
+          }
+        >
+          <Outlet />
+        </Suspense>
       </main>
     </div>
   );