Skip to content

fix(canvas): live mode shows the shared frame skeleton while hydrating#35

Merged
DavidBabinec merged 1 commit into
mainfrom
feat/live-mode-loading-skeleton
Jun 11, 2026
Merged

fix(canvas): live mode shows the shared frame skeleton while hydrating#35
DavidBabinec merged 1 commit into
mainfrom
feat/live-mode-loading-skeleton

Conversation

@DavidBabinec

Copy link
Copy Markdown
Contributor

What

Design mode and live mode now load consistently. During site hydration, design mode shows the per-breakpoint CanvasFrameSkeletonFrames — but live mode showed a "No page selected / Open a page to edit it live." empty state for the same window, which reads like there's nothing to open rather than something loading.

How

CanvasLiveSurface's null-page branch now renders the shared CanvasFrameSkeleton (the exact component the design frames use) inside the live frame's own width model:

  • Page pending, breakpoint known (e.g. brief page switches): the skeleton is keyed to the active breakpoint and clamped to its width, like the real live frame would be.
  • Full hydration (no breakpoints yet): fluid full-width skeleton, matching the live frame's default.

The empty state is deleted entirely — design mode never had one, and with loadSite always selecting a page there is no legitimate "site loaded but no page" state to represent.

Testing

  • New canvasLiveSurface.test.tsx: skeleton (with aria-busy status semantics) renders while hydrating, keys to the active breakpoint when present, and the old empty-state copy is gone.
  • docs/editor.md canvas-views section notes the shared loading treatment.
  • bun test (5342 pass), bun run build, bun run lint all green.

🤖 Generated with Claude Code

The design canvas renders CanvasFrameSkeletonFrame per breakpoint when
the page is null, but live mode showed a "No page selected" empty state
during the same hydration window — reading like there was nothing to
open. CanvasLiveSurface now renders the shared CanvasFrameSkeleton
inside its own frame width model (breakpoint-keyed when only the page
is pending, fluid during full hydration), so both views load
consistently. The empty state is gone — design mode never had one.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@DavidBabinec DavidBabinec merged commit 1daf4b5 into main Jun 11, 2026
6 checks passed
@DavidBabinec DavidBabinec deleted the feat/live-mode-loading-skeleton branch June 13, 2026 09:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant