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

Pending pulse animation for pre-hydration clicks

Browse Source 
Buttons clicked before hydration get a subtle pulse animation
(sx-pending class) showing the click was captured. The animation
is removed when the click is replayed after hydration, or cleared
on boot completion as a fallback.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-25 15:49:02 +00:00
parent 5ca6952217
commit 27059c0581
3 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
shared/static/wasm/sx/boot.sx
View File

@@ -506,9 +506,14 @@
(when entry
(let ((target (host-get entry "t")))
(when (and target (host-get target "isConnected"))
(dom-remove-class target "sx-pending")
(host-call target "click")))))
(loop (+ i 1)))))))
(host-set! (dom-window) "_sxQ" nil))))))
(host-set! (dom-window) "_sxQ" nil)
;; Clear any remaining pending indicators
(for-each (fn (el) (dom-remove-class el "sx-pending"))
(dom-query-all (dom-body) ".sx-pending")))))))
;; --------------------------------------------------------------------------

3
shared/sx/templates/shell.sx
View File

@@ -77,7 +77,8 @@ details.group{overflow:hidden}details.group>summary{list-style:none}details.grou
;; Server-rendered HTML — visible immediately before JS loads
(div :id "sx-root" (raw! (or body-html "")))
;; Event buffer — captures clicks during hydration gap, replayed after boot
(script (raw! "document.addEventListener('click',function(e){var i=e.target.closest('[data-sx-island]');if(i&&!i['_sxBoundisland-hydrated']){e.stopPropagation();(window._sxQ=window._sxQ||[]).push({t:e.target,ts:Date.now()})}},true)"))
(style (raw! "@keyframes sx-pending-pulse{0%,100%{opacity:1}50%{opacity:.5}}.sx-pending{animation:sx-pending-pulse .8s ease-in-out infinite}"))
(script (raw! "document.addEventListener('click',function(e){var i=e.target.closest('[data-sx-island]');if(i&&!i['_sxBoundisland-hydrated']){e.stopPropagation();var t=e.target.closest('button,a,[role=button]')||e.target;t.classList.add('sx-pending');(window._sxQ=window._sxQ||[]).push({t:t,ts:Date.now()})}},true)"))
(script :type "text/sx" :data-components true :data-hash component-hash
(raw! (or component-defs "")))
(when init-sx

7
web/boot.sx
View File

@@ -506,9 +506,14 @@
(when entry
(let ((target (host-get entry "t")))
(when (and target (host-get target "isConnected"))
(dom-remove-class target "sx-pending")
(host-call target "click")))))
(loop (+ i 1)))))))
(host-set! (dom-window) "_sxQ" nil))))))
(host-set! (dom-window) "_sxQ" nil)
;; Clear any remaining pending indicators
(for-each (fn (el) (dom-remove-class el "sx-pending"))
(dom-query-all (dom-body) ".sx-pending")))))))
;; --------------------------------------------------------------------------