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

static/js/main.js

@@ -10,6 +10,14 @@
     // Flag to keep header visible after navigation
     let keepHeaderVisible = false;
 
+    // Flag to track language switch in progress
+    let languageSwitching = false;
+
+    // Expose for testing (read-only access)
+    Object.defineProperty(window, 'languageSwitching', {
+        get: () => languageSwitching
+    });
+
     // =============================================================================
     // NAVIGATION & MENU SYSTEM
     // =============================================================================
@@ -225,6 +233,50 @@
             }
         });
 
+        // Skeleton loader for language transitions
+        // Add .loading class when language button is clicked
+        document.addEventListener('htmx:beforeRequest', function(evt) {
+            try {
+                const element = evt.detail.elt;
+                if (element && element.classList && element.classList.contains('selector-btn')) {
+                    // Set flag to track language switching
+                    languageSwitching = true;
+
+                    // Add loading class to page containers
+                    const page1 = document.getElementById('cv-inner-content-page-1');
+                    const page2 = document.getElementById('cv-inner-content-page-2');
+                    if (page1) page1.classList.add('loading');
+                    if (page2) page2.classList.add('loading');
+
+                    console.log('Skeleton loader: Added .loading class to page containers');
+                }
+            } catch (e) {
+                console.error('Error in skeleton loader beforeRequest handler:', e);
+            }
+        });
+
+        // Remove .loading class after language transition completes
+        document.addEventListener('htmx:afterSettle', function(evt) {
+            try {
+                if (languageSwitching) {
+                    // Wait for final render to complete
+                    setTimeout(function() {
+                        const page1 = document.getElementById('cv-inner-content-page-1');
+                        const page2 = document.getElementById('cv-inner-content-page-2');
+                        if (page1) page1.classList.remove('loading');
+                        if (page2) page2.classList.remove('loading');
+
+                        // Reset flag
+                        languageSwitching = false;
+
+                        console.log('Skeleton loader: Removed .loading class from page containers');
+                    }, 100);
+                }
+            } catch (e) {
+                console.error('Error in skeleton loader afterSettle handler:', e);
+            }
+        });
+
         // Sync toggle states between desktop and mobile menu
         document.addEventListener('htmx:afterSwap', function(evt) {
             try {