soroban-abacus-flashcards/.claude
Thomas Hallock 2b5d66f776 perf(worksheets): use Suspense streaming for preview generation
Problem: The worksheet page had 1.7-2.3s TTFB because the 1.25MB SVG
preview was being serialized into the initial HTML response, blocking
first paint.

Solution: Use React Suspense to stream the preview separately:
- Page shell renders immediately with settings (~200ms TTFB)
- Preview generates async and streams in when ready (~1.5s later)
- User sees the UI instantly, preview appears with loading skeleton

New components:
- StreamedPreview: async server component that generates preview
- PreviewSkeleton: loading placeholder while streaming
- StreamedPreviewContext: shares streamed data with PreviewCenter
- PreviewDataInjector: bridges server-streamed data to client context

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-23 18:54:17 -06:00
..
skills feat(flowchart): add animated background tiles to FlowchartCards 2026-01-20 10:10:49 -06:00
settings.local.json perf(worksheets): use Suspense streaming for preview generation 2026-01-23 18:54:17 -06:00
terminology.md