⚡ Bolt: Implement route-based code splitting

.jules/bolt.md

@@ -0,0 +1,3 @@
+## 2024-05-23 - [Lazy Loading Routes]
+**Learning:** Wrapped `AnimatedRoutes` in `Suspense` to enable `React.lazy` for route-based code splitting. This significantly reduces initial bundle size but requires a loading fallback.
+**Action:** Always check if code splitting is actually implemented vs just documented.

src/App.jsx

@@ -1,33 +1,42 @@
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
 import { AnimatePresence } from 'framer-motion';
-import PublicLayout from './layouts/PublicLayout';
-import LandingPage from './pages/LandingPage';
-import AboutPage from './pages/AboutPage';
-import FeaturesPage from './pages/FeaturesPage';
-import FaqPage from './pages/FaqPage';
-import AuthPage from './pages/AuthPage';
-import PricingPage from './pages/PricingPage';
-import TermsPage from './pages/TermsPage';
-import PrivacyPage from './pages/PrivacyPage';
-import CookiesPage from './pages/CookiesPage';
+import LoadingSpinner from './components/LoadingSpinner';
 import CookieConsent from './components/CookieConsent';
-import DashboardLayout from './layouts/DashboardLayout';
-import DashboardHome from './pages/dashboard/DashboardHome';
-import DocumentProcessing from './pages/dashboard/DocumentProcessing';
-import DocumentResult from './pages/dashboard/DocumentResult';
-import History from './pages/dashboard/History';
-import MyDocuments from './pages/dashboard/MyDocuments';
-import Analytics from './pages/dashboard/Analytics';
-import Settings from './pages/dashboard/Settings';
-import Billing from './pages/dashboard/Billing';
-import Support from './pages/dashboard/Support';
-import Notifications from './pages/dashboard/Notifications';
-import AdminLayout from './layouts/AdminLayout';
-import AdminHome from './pages/admin/AdminHome';
 import AuthProvider from './context/AuthProvider';
 import ProtectedRoute from './components/auth/ProtectedRoute';
 
+// Lazy load layouts
+const PublicLayout = lazy(() => import('./layouts/PublicLayout'));
+const DashboardLayout = lazy(() => import('./layouts/DashboardLayout'));
+const AdminLayout = lazy(() => import('./layouts/AdminLayout'));
+
+// Lazy load pages
+const LandingPage = lazy(() => import('./pages/LandingPage'));
+const AboutPage = lazy(() => import('./pages/AboutPage'));
+const FeaturesPage = lazy(() => import('./pages/FeaturesPage'));
+const FaqPage = lazy(() => import('./pages/FaqPage'));
+const AuthPage = lazy(() => import('./pages/AuthPage'));
+const PricingPage = lazy(() => import('./pages/PricingPage'));
+const TermsPage = lazy(() => import('./pages/TermsPage'));
+const PrivacyPage = lazy(() => import('./pages/PrivacyPage'));
+const CookiesPage = lazy(() => import('./pages/CookiesPage'));
+
+// Lazy load dashboard pages
+const DashboardHome = lazy(() => import('./pages/dashboard/DashboardHome'));
+const DocumentProcessing = lazy(() => import('./pages/dashboard/DocumentProcessing'));
+const DocumentResult = lazy(() => import('./pages/dashboard/DocumentResult'));
+const History = lazy(() => import('./pages/dashboard/History'));
+const MyDocuments = lazy(() => import('./pages/dashboard/MyDocuments'));
+const Analytics = lazy(() => import('./pages/dashboard/Analytics'));
+const Settings = lazy(() => import('./pages/dashboard/Settings'));
+const Billing = lazy(() => import('./pages/dashboard/Billing'));
+const Support = lazy(() => import('./pages/dashboard/Support'));
+const Notifications = lazy(() => import('./pages/dashboard/Notifications'));
+
+// Lazy load admin pages
+const AdminHome = lazy(() => import('./pages/admin/AdminHome'));
+
 function AnimatedRoutes() {
   const location = useLocation();
 
@@ -76,8 +85,10 @@ function App() {
   return (
     <AuthProvider>
       <Router>
-        <AnimatedRoutes />
-        <CookieConsent />
+        <Suspense fallback={<LoadingSpinner />}>
+          <AnimatedRoutes />
+          <CookieConsent />
+        </Suspense>
       </Router>
     </AuthProvider>
   );

src/components/LoadingSpinner.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './LoadingSpinner.module.css';
+
+const LoadingSpinner = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.spinner} role="status">
+        <span className={styles.srOnly}>Loading...</span>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingSpinner;

src/components/LoadingSpinner.module.css

@@ -0,0 +1,34 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  width: 100%;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(100, 108, 255, 0.1);
+  border-radius: 50%;
+  border-top-color: #646cff;
+  animation: cz-spin 0.8s ease-in-out infinite;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+@keyframes cz-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}