From 097d1bcd0523bbd7ad6dd5d17d28a512a283d7f2 Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Fri, 5 Dec 2025 08:54:45 -0800
Subject: [PATCH] feat: implement code-splitting for routes in App component
 using React.lazy and Suspense

---
 src/App.tsx | 86 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 52 insertions(+), 34 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 157e6d1..112fa2d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { Authenticated, AuthLoading, Unauthenticated } from 'convex/react'
 import { Loader2 } from 'lucide-react'
+import { lazy, Suspense } from 'react'
 import {
   BrowserRouter,
   Navigate,
@@ -9,14 +10,15 @@ import {
 } from 'react-router-dom'
 import { Toaster } from '@/components/ui/sonner'
 import Navbar from './components/Navbar'
-import Admin from './pages/Admin'
-import BuildNew from './pages/BuildNew'
-import BuildProgress from './pages/BuildProgress'
-import Dashboard from './pages/Dashboard'
-import LandingPage from './pages/LandingPage'
-import ProfileDetail from './pages/ProfileDetail'
-import ProfileEditorPage from './pages/ProfileEditorPage'
-import ProfileFlash from './pages/ProfileFlash'
+
+const Admin = lazy(() => import('./pages/Admin'))
+const BuildNew = lazy(() => import('./pages/BuildNew'))
+const BuildProgress = lazy(() => import('./pages/BuildProgress'))
+const Dashboard = lazy(() => import('./pages/Dashboard'))
+const LandingPage = lazy(() => import('./pages/LandingPage'))
+const ProfileDetail = lazy(() => import('./pages/ProfileDetail'))
+const ProfileEditorPage = lazy(() => import('./pages/ProfileEditorPage'))
+const ProfileFlash = lazy(() => import('./pages/ProfileFlash'))
 
 function ConditionalNavbar() {
   const location = useLocation()
@@ -37,36 +39,52 @@ function App() {
 
       <Unauthenticated>
         <ConditionalNavbar />
-        <Routes>
-          <Route path="/" element={<LandingPage />} />
-          <Route path="/builds/new/:buildHash" element={<BuildNew />} />
-          <Route path="/builds/new" element={<BuildNew />} />
-          <Route path="/builds/:buildHash" element={<BuildProgress />} />
-          <Route path="/profiles/:id" element={<ProfileDetail />} />
-          <Route path="*" element={<Navigate to="/" replace />} />
-        </Routes>
+        <Suspense
+          fallback={
+            <div className="flex items-center justify-center min-h-screen bg-slate-950">
+              <Loader2 className="w-10 h-10 text-cyan-500 animate-spin" />
+            </div>
+          }
+        >
+          <Routes>
+            <Route path="/" element={<LandingPage />} />
+            <Route path="/builds/new/:buildHash" element={<BuildNew />} />
+            <Route path="/builds/new" element={<BuildNew />} />
+            <Route path="/builds/:buildHash" element={<BuildProgress />} />
+            <Route path="/profiles/:id" element={<ProfileDetail />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </Suspense>
       </Unauthenticated>
 
       <Authenticated>
         <ConditionalNavbar />
-        <Routes>
-          <Route path="/" element={<LandingPage />} />
-          <Route path="/dashboard" element={<Dashboard />} />
-          <Route path="/admin" element={<Admin />} />
-          <Route path="/builds/new/:buildHash" element={<BuildNew />} />
-          <Route path="/builds/new" element={<BuildNew />} />
-          <Route path="/builds/:buildHash" element={<BuildProgress />} />
-          <Route
-            path="/dashboard/profiles/:id"
-            element={<ProfileEditorPage />}
-          />
-          <Route path="/profiles/:id" element={<ProfileDetail />} />
-          <Route
-            path="/profiles/:id/flash/:target"
-            element={<ProfileFlash />}
-          />
-          <Route path="*" element={<Navigate to="/" replace />} />
-        </Routes>
+        <Suspense
+          fallback={
+            <div className="flex items-center justify-center min-h-screen bg-slate-950">
+              <Loader2 className="w-10 h-10 text-cyan-500 animate-spin" />
+            </div>
+          }
+        >
+          <Routes>
+            <Route path="/" element={<LandingPage />} />
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/admin" element={<Admin />} />
+            <Route path="/builds/new/:buildHash" element={<BuildNew />} />
+            <Route path="/builds/new" element={<BuildNew />} />
+            <Route path="/builds/:buildHash" element={<BuildProgress />} />
+            <Route
+              path="/dashboard/profiles/:id"
+              element={<ProfileEditorPage />}
+            />
+            <Route path="/profiles/:id" element={<ProfileDetail />} />
+            <Route
+              path="/profiles/:id/flash/:target"
+              element={<ProfileFlash />}
+            />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </Suspense>
       </Authenticated>
       <Toaster />
     </BrowserRouter>