iarv/mesh-forge
1
0
Fork 1
mirror of https://github.com/MeshEnvy/mesh-forge.git synced 2026-05-14 13:25:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement code-splitting for routes in App component using React.lazy and Suspense

Browse Source
This commit is contained in:
Ben Allfree
2025-12-05 08:54:45 -08:00
parent 92ca820288
commit 097d1bcd05
1 changed files with 52 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+52 -34
View File
@@ -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>