From 7ea2e93fe1db8cb7122e4c98136f6437b2a453cb Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Tue, 18 Nov 2025 08:47:21 +0000
Subject: [PATCH] fix: apply skeleton shimmer to content wrappers during
 language transitions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../partials/navigation/language-selector.html   | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/templates/partials/navigation/language-selector.html b/templates/partials/navigation/language-selector.html
index 81fbd63..9011c32 100644
--- a/templates/partials/navigation/language-selector.html
+++ b/templates/partials/navigation/language-selector.html
@@ -26,7 +26,13 @@
                 hx-swap="outerHTML swap:250ms settle:250ms"
                 hx-indicator="#lang-indicator-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>
         </button>
         <button class="selector-btn {{if eq .Lang "es"}}active{{end}}"
@@ -36,7 +42,13 @@
                 hx-swap="outerHTML swap:250ms settle:250ms"
                 hx-indicator="#lang-indicator-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>
         </button>
     </div>