---
estimated_steps: 29
estimated_files: 1
skills_used: []
---

# T02: Add React.lazy code splitting for admin and creator dashboard pages

## Description

All 17 page components are eagerly imported in `App.tsx`. Wrap admin and creator pages in `React.lazy()` + `Suspense` so they load on-demand, reducing initial bundle size.

## Steps

1. Read `frontend/src/App.tsx` to see the current import structure.
2. Replace static imports with `React.lazy()` for these pages:
   - `AdminPipeline`
   - `AdminTechniquePages`
   - `AdminReports`
   - `CreatorDashboard`
   - `CreatorSettings`
   - `About`
3. Import `Suspense` from React (add to existing React import).
4. Create a simple `<LoadingFallback />` component inline (a centered loading message) or a shared `Suspense` wrapper.
5. Wrap each lazy-loaded route's `element` in `<Suspense fallback={<LoadingFallback />}>`. Group related routes to minimize repetition.
6. Run `npm run build` and verify the output produces multiple JS chunks in `dist/assets/`.

## Must-Haves

- [ ] `AdminPipeline`, `AdminTechniquePages`, `AdminReports`, `CreatorDashboard`, `CreatorSettings`, `About` are lazy-loaded
- [ ] Core public pages (`Home`, `SearchResults`, `TechniquePage`, `CreatorsBrowse`, `CreatorDetail`, `TopicsBrowse`, `SubTopicPage`) remain eagerly imported
- [ ] `Login` and `Register` remain eagerly imported (auth flow needs instant availability)
- [ ] `Suspense` fallback renders a loading indicator
- [ ] `npm run build` produces split chunks

## Verification

- `npm run build` exits 0
- `ls frontend/dist/assets/*.js | wc -l` — more JS chunks than before (expect 7+ files vs previous ~2-3)
- `rg 'React.lazy' frontend/src/App.tsx` shows 6 lazy imports

## Inputs

- `frontend/src/App.tsx` — current eager import structure

## Expected Output

- `frontend/src/App.tsx` — updated with React.lazy imports and Suspense wrappers

## Inputs

- `frontend/src/App.tsx`

## Expected Output

- `frontend/src/App.tsx`

## Verification

cd frontend && npm run build && ls dist/assets/*.js | wc -l && rg 'React.lazy' src/App.tsx
