fix: apply skeleton shimmer to content wrappers during language transitions
Previously, the .htmx-swapping class was only applied to the language selector button target, not to the actual CV content containers that were being swapped via hx-swap-oob. Solution: - Added hyperscript event handlers to language selector buttons - On htmx:beforeRequest → add .htmx-swapping to both content wrappers - On htmx:afterSwap → remove .htmx-swapping from both wrappers Effect: - Skeleton shimmer (opacity 0.3 + animated ::before overlay) now appears on CV content during language switch (~500ms duration) - Smooth transition with shimmer effect inside content area - No external overlay layer - effect is within existing DOM structure Verified with Playwright test showing: ✅ .htmx-swapping class applied during swap ✅ Opacity changes to 0.3 ✅ ::before pseudo-element with shimmer animation active
This commit is contained in:
@@ -26,7 +26,13 @@
|
|||||||
hx-swap="outerHTML swap:250ms settle:250ms"
|
hx-swap="outerHTML swap:250ms settle:250ms"
|
||||||
hx-indicator="#lang-indicator-en"
|
hx-indicator="#lang-indicator-en"
|
||||||
hx-push-url="/?lang=en"
|
hx-push-url="/?lang=en"
|
||||||
aria-label="English">
|
aria-label="English"
|
||||||
|
_="on htmx:beforeRequest
|
||||||
|
add .htmx-swapping to #cv-inner-content-page-1
|
||||||
|
add .htmx-swapping to #cv-inner-content-page-2
|
||||||
|
on htmx:afterSwap
|
||||||
|
remove .htmx-swapping from #cv-inner-content-page-1
|
||||||
|
remove .htmx-swapping from #cv-inner-content-page-2">
|
||||||
<span>English</span>
|
<span>English</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="selector-btn {{if eq .Lang "es"}}active{{end}}"
|
<button class="selector-btn {{if eq .Lang "es"}}active{{end}}"
|
||||||
@@ -36,7 +42,13 @@
|
|||||||
hx-swap="outerHTML swap:250ms settle:250ms"
|
hx-swap="outerHTML swap:250ms settle:250ms"
|
||||||
hx-indicator="#lang-indicator-es"
|
hx-indicator="#lang-indicator-es"
|
||||||
hx-push-url="/?lang=es"
|
hx-push-url="/?lang=es"
|
||||||
aria-label="Español">
|
aria-label="Español"
|
||||||
|
_="on htmx:beforeRequest
|
||||||
|
add .htmx-swapping to #cv-inner-content-page-1
|
||||||
|
add .htmx-swapping to #cv-inner-content-page-2
|
||||||
|
on htmx:afterSwap
|
||||||
|
remove .htmx-swapping from #cv-inner-content-page-1
|
||||||
|
remove .htmx-swapping from #cv-inner-content-page-2">
|
||||||
<span>Español</span>
|
<span>Español</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user