Fix stepper flash: SSR and client both start at step 0
Previously SSR rendered at step 16 (hardcoded) but client initialized from cookie, causing a flash from 16 to the cookie value on return visits. Fix: Both SSR and client default to step 0. The def-store initializer reads the cookie for the client's initial value. Return visits show a progressive fill (0 → cookie value) instead of a jarring state jump. - step-idx default: (signal 0) in both SSR and client paths - def-store: reads sx-home-stepper cookie for initial value, defaults to 0 - Removed redundant post-hydration cookie reset block Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5,8 +5,20 @@
|
|||||||
((source "(div (~tw :tokens \"text-center\")\n (h1 (~tw :tokens \"text-3xl font-bold mb-2\")\n (span (~tw :tokens \"text-rose-500\") \"the \")\n (span (~tw :tokens \"text-amber-500\") \"joy \")\n (span (~tw :tokens \"text-emerald-500\") \"of \")\n (span (~tw :tokens \"text-violet-600 text-4xl\") \"sx\")))")
|
((source "(div (~tw :tokens \"text-center\")\n (h1 (~tw :tokens \"text-3xl font-bold mb-2\")\n (span (~tw :tokens \"text-rose-500\") \"the \")\n (span (~tw :tokens \"text-amber-500\") \"joy \")\n (span (~tw :tokens \"text-emerald-500\") \"of \")\n (span (~tw :tokens \"text-violet-600 text-4xl\") \"sx\")))")
|
||||||
(steps (signal (list)))
|
(steps (signal (list)))
|
||||||
(store
|
(store
|
||||||
(if (client?) (def-store "home-stepper" (fn () {:step-idx (signal 16)})) nil))
|
(if
|
||||||
(step-idx (if store (get store "step-idx") (signal 16)))
|
(client?)
|
||||||
|
(def-store
|
||||||
|
"home-stepper"
|
||||||
|
(fn
|
||||||
|
()
|
||||||
|
(let
|
||||||
|
((raw (host-get (host-global "document") "cookie"))
|
||||||
|
(prefix "sx-home-stepper="))
|
||||||
|
(let
|
||||||
|
((val (when (and (string? raw) (contains? raw prefix)) (let ((start (+ (index-of raw prefix) (len prefix)))) (let ((rest (slice raw start)) (end-pos (index-of (slice raw start) ";"))) (if (> end-pos -1) (slice rest 0 end-pos) rest))))))
|
||||||
|
(let ((n (if val (parse-number val) 0))) {:step-idx (signal (if (and (number? n) (>= n 0) (<= n 16)) n 0))})))))
|
||||||
|
nil))
|
||||||
|
(step-idx (if store (get store "step-idx") (signal 0)))
|
||||||
(dom-stack-sig (signal (list)))
|
(dom-stack-sig (signal (list)))
|
||||||
(code-tokens (signal (list))))
|
(code-tokens (signal (list))))
|
||||||
(letrec
|
(letrec
|
||||||
@@ -310,15 +322,7 @@
|
|||||||
"sx-home-stepper="
|
"sx-home-stepper="
|
||||||
target
|
target
|
||||||
";path=/;max-age=31536000;SameSite=Lax")))))))
|
";path=/;max-age=31536000;SameSite=Lax")))))))
|
||||||
(let
|
nil
|
||||||
((saved (if (client?) (let ((raw (host-get (dom-document) "cookie")) (prefix "sx-home-stepper=")) (when (and (string? raw) (contains? raw prefix)) (let ((start (+ (index-of raw prefix) (len prefix)))) (let ((rest (slice raw start)) (end-pos (index-of rest ";"))) (if (> end-pos -1) (slice rest 0 end-pos) rest))))) (get-cookie "sx-home-stepper"))))
|
|
||||||
(when
|
|
||||||
(string? saved)
|
|
||||||
(let
|
|
||||||
((n (parse-number saved)))
|
|
||||||
(when
|
|
||||||
(and (number? n) (>= n 0) (<= n 16))
|
|
||||||
(reset! step-idx n)))))
|
|
||||||
(let
|
(let
|
||||||
((parsed (sx-parse source)))
|
((parsed (sx-parse source)))
|
||||||
(when
|
(when
|
||||||
|
|||||||
Reference in New Issue
Block a user