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:
juanatsap
2025-11-18 08:47:21 +00:00
parent c1f2f89555
commit 7ea2e93fe1
@@ -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>