perf(ui): route-level code splitting (RECOMMENDATIONS #7)

React.lazy per page: the initial bundle drops 678 KB -> 381 KB (gzip 221 -> 125 KB);
Dashboard's 263 KB chunk (Chart.js + react-grid-layout) now loads only when the
dashboard route is visited. Theme-correct Suspense fallback. Landing + Layout stay
eager for first paint. Verified: build green with per-route chunks.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/main.jsx

@@ -1,25 +1,35 @@
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import Landing from './pages/Landing.jsx';
-import Dashboard from './pages/Dashboard.jsx';
-import Senders from './pages/Senders.jsx';
-import Cleanup from './pages/Cleanup.jsx';
-import Unsubscribe from './pages/Unsubscribe.jsx';
-import FolderView from './pages/FolderView.jsx';
-import SearchResults from './pages/SearchResults.jsx';
 import Layout from './components/Layout.jsx';
-import DesignSystem from './pages/DesignSystem.jsx';
 import { ToastProvider, TooltipProvider } from './components/ui';
 import '@fontsource-variable/inter';
 import './index.css';
 import './styles.css';
 
+// Route-level code splitting: each page loads its own chunk on first visit, so the
+// initial bundle no longer carries Chart.js / grid-layout / every page at once.
+// Landing + Layout stay eager (they're the first paint).
+const Dashboard = lazy(() => import('./pages/Dashboard.jsx'));
+const Senders = lazy(() => import('./pages/Senders.jsx'));
+const Cleanup = lazy(() => import('./pages/Cleanup.jsx'));
+const Unsubscribe = lazy(() => import('./pages/Unsubscribe.jsx'));
+const FolderView = lazy(() => import('./pages/FolderView.jsx'));
+const SearchResults = lazy(() => import('./pages/SearchResults.jsx'));
+const DesignSystem = lazy(() => import('./pages/DesignSystem.jsx'));
+
+// Minimal, theme-correct route fallback (skeleton-style, per the design system).
+const RouteFallback = () => (
+  <div className="p-6 text-sm text-muted-foreground" aria-busy="true">Loading…</div>
+);
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <ToastProvider>
       <TooltipProvider delayDuration={200}>
         <BrowserRouter>
+          <Suspense fallback={<RouteFallback />}>
             <Routes>
               {/* Public landing page */}
               <Route path="/" element={<Landing />} />
@@ -37,6 +47,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 
               <Route path="*" element={<Navigate to="/" replace />} />
             </Routes>
+          </Suspense>
         </BrowserRouter>
       </TooltipProvider>
     </ToastProvider>