coop/rose-ash
1
0
Fork 0
Code Issues Pull Requests Actions 7 Packages Projects Releases Wiki Activity

Fix stepper hydration flash: queueMicrotask for rebuild-preview

Browse Source 
The lake preview ("the joy of sx") was flashing because:
1. SSR renders preview in lake (server-only guard)
2. replaceChildren swaps island DOM (lake now empty)
3. rebuild-preview effect was either skipped or deferred (rAF/setTimeout)
4. Browser paints empty lake → visible flash

Fix: first-run effect uses queueMicrotask instead of schedule-idle.
Microtasks fire after the current synchronous code (including
replaceChildren) but BEFORE the browser paints. The lake is filled
before any frame renders with empty content.

Also restored the (when (not (client?))) lake guard — the client
can't render steps-to-preview (returns raw SX expressions that
render-to-dom shows as source text, not rendered HTML).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
giles
2026-04-10 09:58:24 +00:00
parent 9c64d1d929
commit 3d05efbb9b
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
sx/sx/home-stepper.sx
View File

@@ -345,7 +345,7 @@
(build-code-tokens (first parsed) tokens step-ref 0)
(reset! code-tokens tokens)))))
(let
((_eff (let ((initial-idx (deref step-idx)) (first-run (signal true))) (effect (fn () (let ((cur (deref step-idx))) (if (and (deref first-run) (= cur initial-idx)) (reset! first-run false) (do (reset! first-run false) (schedule-idle (fn () (build-code-dom) (rebuild-preview cur) (update-code-highlight) (run-post-render-hooks)))))))))))
((_eff (let ((first-run (signal true))) (effect (fn () (let ((cur (deref step-idx))) (if (deref first-run) (do (reset! first-run false) (host-call (host-global "queueMicrotask") (host-callback (fn () (rebuild-preview cur) (run-post-render-hooks))))) (schedule-idle (fn () (build-code-dom) (rebuild-preview cur) (update-code-highlight) (run-post-render-hooks))))))))))
(div
(~tw :tokens "space-y-4 text-center")
(div
@@ -400,4 +400,6 @@
"▶"))
(lake
:id "home-preview"
(steps-to-preview (deref steps) (deref step-idx))))))))
(when
(not (client?))
(steps-to-preview (deref steps) (deref step-idx)))))))))