Build the agent-native compute CRM platform

apps/web/src/App.tsx

@@ -1,18 +1,12 @@
 /**
  * Application root: routing, data fetching, and the auth gate.
  */
-import { useEffect, useState } from 'react';
+import { lazy, Suspense, useEffect, useState } from 'react';
 import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { ApiError, get, getSupabase, loadPublicConfig, patch, type PublicConfig } from '@/lib/api';
 import { ThemeProvider } from '@/lib/theme';
 import { Shell } from '@/components/Shell';
-import { Overview } from '@/pages/Overview';
-import { Capacity } from '@/pages/Capacity';
-import { DemandPipeline, SupplyPipeline } from '@/pages/Pipeline';
-import { Settings } from '@/pages/Settings';
-import { Accounts } from '@/pages/Accounts';
-import { Margin } from '@/pages/Margin';
 import { SignIn } from '@/pages/SignIn';
 import { CreateProfile } from '@/pages/CreateProfile';
 import { Register } from '@/pages/Register';
@@ -20,6 +14,18 @@ import { PiggyMark } from '@/components/PiggyMark';
 import { EmptyState } from '@/components/ui';
 import { usePageTitle } from '@/lib/title';
 
+const Overview = lazy(() => import('@/pages/Overview').then(({ Overview }) => ({ default: Overview })));
+const Capacity = lazy(() => import('@/pages/Capacity').then(({ Capacity }) => ({ default: Capacity })));
+const DemandPipeline = lazy(() => import('@/pages/Pipeline').then(({ DemandPipeline }) => ({ default: DemandPipeline })));
+const SupplyPipeline = lazy(() => import('@/pages/Pipeline').then(({ SupplyPipeline }) => ({ default: SupplyPipeline })));
+const Settings = lazy(() => import('@/pages/Settings').then(({ Settings }) => ({ default: Settings })));
+const Accounts = lazy(() => import('@/pages/Accounts').then(({ Accounts }) => ({ default: Accounts })));
+const Margin = lazy(() => import('@/pages/Margin').then(({ Margin }) => ({ default: Margin })));
+const FactReview = lazy(() => import('@/pages/FactReview').then(({ FactReview }) => ({ default: FactReview })));
+const Contracts = lazy(() => import('@/pages/Contracts').then(({ Contracts }) => ({ default: Contracts })));
+const Imports = lazy(() => import('@/pages/Imports').then(({ Imports }) => ({ default: Imports })));
+const Piggy = lazy(() => import('@/pages/Piggy').then(({ Piggy }) => ({ default: Piggy })));
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -157,21 +163,47 @@ function AuthGate({ config }: { config: PublicConfig }) {
   return (
     <Routes>
       <Route element={<Shell />}>
-        <Route index element={<Overview />} />
-        <Route path="margin" element={<Margin />} />
-        <Route path="capacity" element={<Capacity />} />
-        <Route path="demand" element={<DemandPipeline />} />
-        <Route path="supply" element={<SupplyPipeline />} />
-        <Route path="accounts" element={<Accounts />} />
-        <Route path="contracts" element={<Placeholder title="Contracts" />} />
+        <Route index element={<RoutePage><Overview /></RoutePage>} />
+        <Route path="margin" element={<RoutePage><Margin /></RoutePage>} />
+        <Route path="capacity" element={<RoutePage><Capacity /></RoutePage>} />
+        <Route path="demand" element={<RoutePage><DemandPipeline /></RoutePage>} />
+        <Route path="supply" element={<RoutePage><SupplyPipeline /></RoutePage>} />
+        <Route path="accounts" element={<RoutePage><Accounts /></RoutePage>} />
+        <Route path="contracts" element={<RoutePage><Contracts /></RoutePage>} />
+        <Route path="imports" element={<RoutePage><Imports /></RoutePage>} />
+        <Route path="piggy" element={<RoutePage><Piggy /></RoutePage>} />
         <Route path="team" element={<Team />} />
-        <Route path="settings" element={<Settings />} />
+        <Route path="facts" element={<RoutePage><FactReview /></RoutePage>} />
+        <Route path="settings" element={<RoutePage><Settings /></RoutePage>} />
         <Route path="*" element={<Placeholder title="Not found" />} />
       </Route>
     </Routes>
   );
 }
 
+function RoutePage({ children }: { children: React.ReactNode }) {
+  return (
+    <Suspense fallback={<RouteLoading />}>
+      {children}
+    </Suspense>
+  );
+}
+
+function RouteLoading() {
+  return (
+    <div
+      className="flex min-h-[50dvh] items-center justify-center"
+      role="status"
+      aria-live="polite"
+    >
+      <div className="flex flex-col items-center gap-3 text-sm text-muted">
+        <PiggyMark className="h-9 w-9 animate-pulse text-fg" aria-hidden />
+        <span>Loading view…</span>
+      </div>
+    </div>
+  );
+}
+
 function Splash() {
   return (
     <Centered>