kite/.planning/milestones/v0.2-phases/11-visual-design-responsive-layout-cleanup/11-02-PLAN.md

phase, plan, type, wave, depends_on, requirements, files_modified, autonomous

phase	plan	type	wave	depends_on	requirements	files_modified	autonomous
11-visual-design-responsive-layout-cleanup	2	execute	1	11-01	PERF-03	frontend/src/router/index.js frontend/src/router/__tests__/router.guard.test.js	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.