Skip to content

Comments

Lazy-load route panels for code splitting#289

Open
epatey wants to merge 1 commit intomainfrom
lazy
Open

Lazy-load route panels for code splitting#289
epatey wants to merge 1 commit intomainfrom
lazy

Conversation

@epatey
Copy link
Contributor

@epatey epatey commented Feb 17, 2026

Caution

It's fine to defer merging this branch for a few days past Wednesday to be conservative.

It is a relatively safe change. The changes are all at the app router layer making ALL routes lazy. That is, there's no manually coded deferred imports within any of the panels. It's all at the panel level itself.

Summary

  • Replace static imports of route-level panel components (ScansPanel, ScanPanel, TranscriptsPanel, TranscriptPanel, ProjectPanel, ValidationPanel, ScannerResultPanel, RunScanPanel) with React.lazy + dynamic import()
  • Wrap <Outlet /> in a <Suspense> boundary with <LoadingBar> as the fallback
  • Remove unused element property from ActivityConfig and its static panel imports in activities.tsx

Motivation

The initial JS bundle includes all route panels even though only one is rendered at a time. Lazy loading splits each panel into its own chunk, reducing the initial payload and improving time-to-interactive — especially for the common case where users land on a single route.

Impact

Initial download size per top level route (measured from browser network tab):

Route Before (kB) After (kB) Saved (kB) Change
Transcripts 9,594 1,520 8,074 -84%
Scans 9,594 1,911 7,683 -80%
Project 9,594 1,551 8,043 -84%

The biggest win comes from no longer eagerly loading MathJax (tex-svg-full, xypic) on routes that don't render transcripts.

@epatey epatey marked this pull request as ready for review February 17, 2026 19:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant