feat: implement lazy loading for LoginPage and add Suspense to IntranetLayout

nest-intra/src/App.tsx

@@ -20,12 +20,18 @@ const IntranetModeration   = lazy(() => import('./pages/intranet/IntranetModerat
 export default function App() {
   return (
     <AuthProvider>
-      <Suspense fallback={<PageLoader />}>
       <Routes>
-          {/* Login */}
+        {/* Login — own Suspense so the full-page loader only shows here */}
-          <Route path="/login" element={<LoginPage />} />
+        <Route
+          path="/login"
+          element={
+            <Suspense fallback={<PageLoader />}>
+              <LoginPage />
+            </Suspense>
+          }
+        />
 
-          {/* Intranet (staff only) */}
+        {/* Intranet (staff only) — Suspense is inside IntranetLayout */}
         <Route
           path="/intranet"
           element={
@@ -48,7 +54,6 @@ export default function App() {
         {/* Catch-all: redirect to intranet */}
         <Route path="*" element={<Navigate to="/intranet" replace />} />
       </Routes>
-      </Suspense>
     </AuthProvider>
   );
 }

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)' }}>
+        <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>
   );