Crowmate/Nest
Archived
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Thibault Pouch
2026-02-27 10:22:37 +01:00
parent 992b4340bd
commit 4607e79b8b
2 changed files with 45 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
nest-intra/src/App.tsx
View File

@@ -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>
);
}

18
nest-intra/src/components/layout/IntranetLayout.tsx
View File

@@ -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>
);