xpltdco/chrysopedia
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

feat: Replaced 6 static page imports with React.lazy + Suspense in App.…

Browse source 
- "frontend/src/App.tsx"

GSD-Task: S05/T02
This commit is contained in:
jlightner 2026-04-03 23:06:39 +00:00
parent 0c99b1a8b7
commit 7b9f6785cb
1 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/App.tsx
View file

@ -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 />} />