From 3d05efbb9bfbcc3ab73977a53c899ec961b66cb1 Mon Sep 17 00:00:00 2001 From: giles Date: Fri, 10 Apr 2026 09:58:24 +0000 Subject: [PATCH] Fix stepper hydration flash: queueMicrotask for rebuild-preview MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- sx/sx/home-stepper.sx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/sx/sx/home-stepper.sx b/sx/sx/home-stepper.sx index 4e8b87dc..397dcf18 100644 --- a/sx/sx/home-stepper.sx +++ b/sx/sx/home-stepper.sx @@ -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)))))))))