From 7b9f6785cb4677702d272b633356bc33995dd6d7 Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Fri, 3 Apr 2026 23:06:39 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Replaced=206=20static=20page=20imports?=
 =?UTF-8?q?=20with=20React.lazy=20+=20Suspense=20in=20App.=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/App.tsx"

GSD-Task: S05/T02
---
 frontend/src/App.tsx | 36 +++++++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index cc79c1b..5d926e7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from "react";
+import React, { useState, useEffect, useRef, useCallback, Suspense } from "react";
 import { Link, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import Home from "./pages/Home";
 import SearchResults from "./pages/SearchResults";
@@ -7,20 +7,30 @@ import CreatorsBrowse from "./pages/CreatorsBrowse";
 import CreatorDetail from "./pages/CreatorDetail";
 import TopicsBrowse from "./pages/TopicsBrowse";
 import SubTopicPage from "./pages/SubTopicPage";
-import AdminReports from "./pages/AdminReports";
-import AdminPipeline from "./pages/AdminPipeline";
-import AdminTechniquePages from "./pages/AdminTechniquePages";
-import About from "./pages/About";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
-import CreatorDashboard from "./pages/CreatorDashboard";
-import CreatorSettings from "./pages/CreatorSettings";
+
+// Lazy-loaded pages — admin, creator, and info routes split into separate chunks
+const AdminReports = React.lazy(() => import("./pages/AdminReports"));
+const AdminPipeline = React.lazy(() => import("./pages/AdminPipeline"));
+const AdminTechniquePages = React.lazy(() => import("./pages/AdminTechniquePages"));
+const About = React.lazy(() => import("./pages/About"));
+const CreatorDashboard = React.lazy(() => import("./pages/CreatorDashboard"));
+const CreatorSettings = React.lazy(() => import("./pages/CreatorSettings"));
 import AdminDropdown from "./components/AdminDropdown";
 import AppFooter from "./components/AppFooter";
 import SearchAutocomplete from "./components/SearchAutocomplete";
 import ProtectedRoute from "./components/ProtectedRoute";
 import { AuthProvider, useAuth } from "./context/AuthContext";
 
+function LoadingFallback() {
+  return (
+    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "40vh" }}>
+      <p style={{ color: "var(--text-secondary, #94a3b8)", fontSize: "0.95rem" }}>Loading…</p>
+    </div>
+  );
+}
+
 function AuthNav() {
   const { isAuthenticated, user, logout } = useAuth();
   const navigate = useNavigate();
@@ -163,20 +173,20 @@ function AppShell() {
           <Route path="/topics" element={<TopicsBrowse />} />
 
           {/* Admin routes */}
-          <Route path="/admin/reports" element={<AdminReports />} />
-          <Route path="/admin/pipeline" element={<AdminPipeline />} />
-          <Route path="/admin/techniques" element={<AdminTechniquePages />} />
+          <Route path="/admin/reports" element={<Suspense fallback={<LoadingFallback />}><AdminReports /></Suspense>} />
+          <Route path="/admin/pipeline" element={<Suspense fallback={<LoadingFallback />}><AdminPipeline /></Suspense>} />
+          <Route path="/admin/techniques" element={<Suspense fallback={<LoadingFallback />}><AdminTechniquePages /></Suspense>} />
 
           {/* Info routes */}
-          <Route path="/about" element={<About />} />
+          <Route path="/about" element={<Suspense fallback={<LoadingFallback />}><About /></Suspense>} />
 
           {/* Auth routes */}
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
 
           {/* Creator routes (protected) */}
-          <Route path="/creator/dashboard" element={<ProtectedRoute><CreatorDashboard /></ProtectedRoute>} />
-          <Route path="/creator/settings" element={<ProtectedRoute><CreatorSettings /></ProtectedRoute>} />
+          <Route path="/creator/dashboard" element={<ProtectedRoute><Suspense fallback={<LoadingFallback />}><CreatorDashboard /></Suspense></ProtectedRoute>} />
+          <Route path="/creator/settings" element={<ProtectedRoute><Suspense fallback={<LoadingFallback />}><CreatorSettings /></Suspense></ProtectedRoute>} />
 
           {/* Fallback */}
           <Route path="*" element={<Navigate to="/" replace />} />