Skip to content

refactor(notebook): eliminate empty notebook flash with eager WASM init#564

Merged
rgbkrk merged 1 commit intomainfrom
quill/startup-skeleton
Mar 6, 2026
Merged

refactor(notebook): eliminate empty notebook flash with eager WASM init#564
rgbkrk merged 1 commit intomainfrom
quill/startup-skeleton

Conversation

@rgbkrk
Copy link
Member

@rgbkrk rgbkrk commented Mar 6, 2026

Summary

Eliminates the jarring visual flicker (4-5 distinct frames) when opening a notebook by:

  • Moving WASM initialization to module import time (before React renders), shaving ~50-100ms from the critical path
  • Adding isLoading state to distinguish "cells haven't loaded yet" from "genuinely empty notebook"
  • Showing a skeleton placeholder instead of the "Empty notebook" UI during loading

Changes

  • useAutomergeNotebook: Eager wasmReady promise at module top level, isLoading state tracks bootstrap completion
  • CellSkeleton: New placeholder component matching cell layout with animated input area
  • NotebookView: Renders skeleton when cells.length === 0 && isLoading, preserving "Empty notebook" UI as safety net for edge cases
  • App.tsx: Wires isLoading from hook through to view

Verification

  • Open existing notebook: verify skeleton appears briefly, then cells (no "Empty notebook" flash)
  • New notebook: verify skeleton appears then default cell (currently created by NotebookState::new_empty())
  • Slow daemon: kill daemon and open notebook, skeleton persists during retry without flashing empty state

PR submitted by @rgbkrk's agent, Quill

…init and loading skeleton

Move WASM initialization to module import time (before React renders) to eliminate
the 50-100ms latency during bootstrap. Add isLoading state to distinguish "cells
haven't loaded yet" from "genuinely empty notebook". Show a skeleton placeholder
instead of the "Empty notebook" UI during loading, providing visual continuity.

- Eager WASM init: const wasmReady at module top level, starts loading before useEffect
- isLoading state: tracks bootstrap progress, exported from useAutomergeNotebook hook
- CellSkeleton component: simple placeholder matching cell layout with animated input area
- Wired through App.tsx → NotebookView to consume isLoading prop

Fixes the jarring 4-5 frame sequence on startup where "Empty notebook" appears
before cells load.
@rgbkrk rgbkrk enabled auto-merge (squash) March 6, 2026 16:32
@rgbkrk rgbkrk merged commit 86a3cb3 into main Mar 6, 2026
19 of 20 checks passed
@rgbkrk rgbkrk deleted the quill/startup-skeleton branch March 6, 2026 16:47
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