From ed416bb85c081e7ae4ace670829b8aefbd96402e Mon Sep 17 00:00:00 2001
From: sickn33 <sickn33@users.noreply.github.com>
Date: Wed, 18 Mar 2026 19:08:05 +0100
Subject: [PATCH] perf(web-app): Lazy load route pages

Lazy load the home and skill detail routes so markdown and
syntax-highlighting code do not inflate the initial app bundle.

Keep behavior unchanged while splitting the web app into smaller
chunks and clearing the Vite large-bundle warning.
---
 apps/web-app/src/App.tsx                      | 24 ++++++++++++++-----
 .../src/__tests__/App.performance.test.tsx    | 14 +++++++++++
 2 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 apps/web-app/src/__tests__/App.performance.test.tsx

diff --git a/apps/web-app/src/App.tsx b/apps/web-app/src/App.tsx
index dfb60123..41851774 100644
--- a/apps/web-app/src/App.tsx
+++ b/apps/web-app/src/App.tsx
@@ -1,8 +1,10 @@
+import { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
-import { Home } from './pages/Home';
-import { SkillDetail } from './pages/SkillDetail';
 import { BookOpen, Github } from 'lucide-react';
 
+const Home = lazy(() => import('./pages/Home'));
+const SkillDetail = lazy(() => import('./pages/SkillDetail'));
+
 function App(): React.ReactElement {
   return (
     <Router basename={import.meta.env.BASE_URL.replace(/\/$/, '') || '/'}>
@@ -30,10 +32,20 @@ function App(): React.ReactElement {
           </div>
         </header>
         <main className="container max-w-screen-2xl mx-auto px-4 py-6">
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/skill/:id" element={<SkillDetail />} />
-          </Routes>
+          <Suspense
+            fallback={
+              <div
+                className="flex min-h-[40vh] items-center justify-center text-sm text-slate-500 dark:text-slate-400"
+              >
+                Loading...
+              </div>
+            }
+          >
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/skill/:id" element={<SkillDetail />} />
+            </Routes>
+          </Suspense>
         </main>
       </div>
     </Router>
diff --git a/apps/web-app/src/__tests__/App.performance.test.tsx b/apps/web-app/src/__tests__/App.performance.test.tsx
new file mode 100644
index 00000000..7a39b9ac
--- /dev/null
+++ b/apps/web-app/src/__tests__/App.performance.test.tsx
@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+
+describe('App route loading', () => {
+  it('lazy loads route pages to keep the initial bundle smaller', () => {
+    const appPath = path.resolve(__dirname, '..', 'App.tsx');
+    const source = fs.readFileSync(appPath, 'utf8');
+
+    expect(source).toMatch(/lazy\(\(\) => import\('\.\/pages\/Home'\)\)/);
+    expect(source).toMatch(/lazy\(\(\) => import\('\.\/pages\/SkillDetail'\)\)/);
+    expect(source).toMatch(/<Suspense/);
+  });
+});