perf: code split frontend routes

src/App.tsx

@@ -1,15 +1,17 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import { Loader2 } from 'lucide-react';
 import Layout from './components/Layout';
-import Dashboard from './pages/Dashboard';
-import Products from './pages/Products';
-import ProductDetails from './pages/ProductDetails';
-import Clients from './pages/Clients';
-import ClientDetails from './pages/ClientDetails';
-import Campaigns from './pages/Campaigns';
-import Login from './pages/Login';
 import { isAuthenticated } from './dataService';
 
+const Dashboard = React.lazy(() => import('./pages/Dashboard'));
+const Products = React.lazy(() => import('./pages/Products'));
+const ProductDetails = React.lazy(() => import('./pages/ProductDetails'));
+const Clients = React.lazy(() => import('./pages/Clients'));
+const ClientDetails = React.lazy(() => import('./pages/ClientDetails'));
+const Campaigns = React.lazy(() => import('./pages/Campaigns'));
+const Login = React.lazy(() => import('./pages/Login'));
+
 function PrivateRoute({ children }: { children: React.ReactNode }) {
   const location = useLocation();
   if (!isAuthenticated()) {
@@ -18,20 +20,28 @@ function PrivateRoute({ children }: { children: React.ReactNode }) {
   return children;
 }
 
+const RouteFallback = () => (
+  <div className="flex min-h-screen items-center justify-center bg-dark-bg text-brand-primary">
+    <Loader2 className="h-8 w-8 animate-spin" />
+  </div>
+);
+
 function App() {
   return (
-    <Routes>
+    <Suspense fallback={<RouteFallback />}>
-      <Route path="/login" element={<Login />} />
+      <Routes>
-      <Route path="/" element={<Navigate to="/graph" replace />} />
+        <Route path="/login" element={<Login />} />
-      <Route path="/" element={<PrivateRoute><Layout /></PrivateRoute>}>
+        <Route path="/" element={<Navigate to="/graph" replace />} />
-        <Route path="graph" element={<Dashboard />} />
+        <Route path="/" element={<PrivateRoute><Layout /></PrivateRoute>}>
-        <Route path="products" element={<Products />} />
+          <Route path="graph" element={<Dashboard />} />
-        <Route path="products/:id" element={<ProductDetails />} />
+          <Route path="products" element={<Products />} />
-        <Route path="clients" element={<Clients />} />
+          <Route path="products/:id" element={<ProductDetails />} />
-        <Route path="clients/:name" element={<ClientDetails />} />
+          <Route path="clients" element={<Clients />} />
-        <Route path="campaigns" element={<Campaigns />} />
+          <Route path="clients/:name" element={<ClientDetails />} />
-      </Route>
+          <Route path="campaigns" element={<Campaigns />} />
-    </Routes>
+        </Route>
+      </Routes>
+    </Suspense>
   );
 }