---
phase: 11-visual-design-responsive-layout-cleanup
plan: 2
type: execute
wave: 1
depends_on: [11-01]
requirements: [PERF-03]
files_modified:
  - frontend/src/router/index.js
  - frontend/src/router/__tests__/router.guard.test.js
autonomous: true
---

# Plan 11-02 — Lazy-Load Non-Critical Routes

## Objective

Satisfy PERF-03 by lazy-loading every route component that is not needed for the initial render, while preserving auth/admin guard behavior.

## Tasks

1. Keep `FileManagerView` synchronous for `/` as the critical first authenticated surface unless the baseline report shows a strong reason to split it. Document this in `router/index.js` near the import.
2. Replace synchronous imports in `frontend/src/router/index.js` for non-initial routes:
   - `TopicsView`
   - `DocumentView`
   - `SettingsView`
   - `CloudStorageView`
   - `CloudFolderView`
3. Keep `/folders/:folderId` on the same `FileManagerView` component for behavior parity with `/`; it is already in the initial chunk because `/` uses the same component.
4. Preserve existing lazy auth/admin/shared route imports.
5. Extend router tests so guard behavior is verified with lazy route components:
   - non-admin cannot enter `/admin/*`
   - admin redirects away from non-admin routes
   - refresh-before-guard still runs when access token is absent
   - `/topics`, `/document/:id`, `/settings`, `/cloud`, and `/cloud/:provider/:folderId` still resolve
6. Build once and confirm route chunks are emitted.

## Acceptance Criteria

- `rg "import .*View" frontend/src/router/index.js` only returns `FileManagerView` unless a new initial-render route is explicitly justified.
- Admin child routes remain lazy-loaded.
- Router guard tests pass.
- `cd frontend && npm run build` succeeds and emits split route chunks.