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\")))")
|
||||
(steps (signal (list)))
|
||||
(store
|
||||
(if (client?) (def-store "home-stepper" (fn () {:step-idx (signal 16)})) nil))
|
||||
(step-idx (if store (get store "step-idx") (signal 16)))
|
||||
(if
|
||||
(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)))
|
||||
(code-tokens (signal (list))))
|
||||
(letrec
|
||||
@@ -310,15 +322,7 @@
|
||||
"sx-home-stepper="
|
||||
target
|
||||
";path=/;max-age=31536000;SameSite=Lax")))))))
|
||||
(let
|
||||
((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)))))
|
||||
nil
|
||||
(let
|
||||
((parsed (sx-parse source)))
|
||||
(when
|
||||
|
||||
Reference in New Issue
Block a user