docs: Update skeleton loader implementation from hyperscript to JavaScript

MIGRATION SUMMARY:
- Moved skeleton loader logic from hyperscript to JavaScript (main.js)
- Changed from htmx:oobAfterSwap to htmx:afterSettle event
- Changed OOB swap from innerHTML to outerHTML for proper element replacement
- Added languageSwitching flag for state tracking
- Added 100ms delay after afterSettle for final render completion

DOCUMENTATION UPDATES:
- 2-MODERN-WEB-TECHNIQUES.md: Updated skeleton loader section with

templates/cv-content.html

@@ -5,7 +5,7 @@
 <!-- PAGE 1 -->
 <div class="cv-page page-1">
 <div id="cv-inner-content-page-1" class="cv-page-content-wrapper"
-     _="on htmx:oobAfterSwap wait 100ms then remove .loading from me">
+     _="on htmx:afterSettle wait 100ms then remove .loading from me">
     {{template "title-badges" .}}
 
     <!-- Page 1 Content Grid: Left Sidebar + Main Content -->
@@ -49,7 +49,7 @@
 <!-- PAGE 2 -->
 <div class="cv-page page-2">
 <div id="cv-inner-content-page-2" class="cv-page-content-wrapper"
-     _="on htmx:oobAfterSwap wait 100ms then remove .loading from me">
+     _="on htmx:afterSettle wait 100ms then remove .loading from me">
     {{template "title-badges" .}}
 
     <!-- Page 2 Content Grid: Main Content + Right Sidebar -->

templates/index.html

@@ -128,15 +128,6 @@
       _="on load call initScrollBehavior()
          on scroll from window call handleScroll()
 
-         -- Skeleton loader for language transitions (global listener)
-         -- Add .loading to PARENT containers that persist across OOB swaps
-         on htmx:beforeRequest
-           if event.detail.elt.classList.contains('selector-btn')
-             add .loading to #cv-inner-content-page-1
-             add .loading to #cv-inner-content-page-2
-           end
-         end
-
          on keydown
            set tagName to event.target.tagName
            set isInputField to (tagName is 'INPUT' or tagName is 'TEXTAREA')

templates/language-switch.html

@@ -24,8 +24,8 @@
 <!-- Out-of-band swap: Page 1 content wrapper with fade transition -->
 <div id="cv-inner-content-page-1"
      class="cv-page-content-wrapper"
-     hx-swap-oob="innerHTML"
-     _="on htmx:oobAfterSwap wait 100ms then remove .loading from me">
+     hx-swap-oob="outerHTML"
+     _="on htmx:afterSettle wait 100ms then remove .loading from me">
     {{template "title-badges" .}}
 
     <!-- Page 1 Content Grid: Left Sidebar + Main Content -->
@@ -68,8 +68,8 @@
 <!-- Out-of-band swap: Page 2 content wrapper with fade transition -->
 <div id="cv-inner-content-page-2"
      class="cv-page-content-wrapper"
-     hx-swap-oob="innerHTML"
-     _="on htmx:oobAfterSwap wait 100ms then remove .loading from me">
+     hx-swap-oob="outerHTML"
+     _="on htmx:afterSettle wait 100ms then remove .loading from me">
     {{template "title-badges" .}}
 
     <!-- Page 2 Content Grid: Main Content + Right Sidebar -->