288 lines
9.9 KiB
HTML
288 lines
9.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Skeleton Loader Fix - Manual Test</title>
|
||
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
||
|
|
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 40px auto;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 { color: #333; }
|
||
|
|
|
||
|
|
.test-section {
|
||
|
|
background: #f5f5f5;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.language-selector-wrapper {
|
||
|
|
display: inline-block;
|
||
|
|
background: white;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 4px;
|
||
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-btn {
|
||
|
|
padding: 8px 16px;
|
||
|
|
margin: 0 4px;
|
||
|
|
border: 2px solid #ddd;
|
||
|
|
background: white;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-btn.active {
|
||
|
|
background: #007bff;
|
||
|
|
color: white;
|
||
|
|
border-color: #007bff;
|
||
|
|
}
|
||
|
|
|
||
|
|
#skeleton-loader {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.8);
|
||
|
|
z-index: 1000;
|
||
|
|
opacity: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
transition: opacity 250ms ease-in-out;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#skeleton-loader.active {
|
||
|
|
opacity: 1;
|
||
|
|
pointer-events: all;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status {
|
||
|
|
background: white;
|
||
|
|
border: 2px solid #ddd;
|
||
|
|
padding: 15px;
|
||
|
|
margin: 10px 0;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status.active {
|
||
|
|
border-color: #28a745;
|
||
|
|
background: #d4edda;
|
||
|
|
}
|
||
|
|
|
||
|
|
#console {
|
||
|
|
background: #1e1e1e;
|
||
|
|
color: #d4d4d4;
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
font-size: 12px;
|
||
|
|
max-height: 300px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.console-line {
|
||
|
|
margin: 4px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.console-line.before { color: #4ec9b0; }
|
||
|
|
.console-line.after { color: #ce9178; }
|
||
|
|
.console-line.skeleton { color: #dcdcaa; }
|
||
|
|
|
||
|
|
.instructions {
|
||
|
|
background: #fff3cd;
|
||
|
|
border: 1px solid #ffc107;
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 4px;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.success {
|
||
|
|
background: #d4edda;
|
||
|
|
border: 1px solid #28a745;
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 4px;
|
||
|
|
color: #155724;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error {
|
||
|
|
background: #f8d7da;
|
||
|
|
border: 1px solid #dc3545;
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 4px;
|
||
|
|
color: #721c24;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>🔬 Skeleton Loader Fix - Manual Verification</h1>
|
||
|
|
|
||
|
|
<div class="instructions">
|
||
|
|
<h3>📋 Test Instructions:</h3>
|
||
|
|
<ol>
|
||
|
|
<li>Click the "Switch to Spanish" button below</li>
|
||
|
|
<li>Watch for the dark overlay to appear briefly</li>
|
||
|
|
<li>The overlay should disappear after the content loads</li>
|
||
|
|
<li>Check the console log below for event tracking</li>
|
||
|
|
<li>Try switching back and forth multiple times</li>
|
||
|
|
</ol>
|
||
|
|
<p><strong>✅ PASS</strong>: Overlay appears and disappears smoothly</p>
|
||
|
|
<p><strong>❌ FAIL</strong>: Overlay stays visible permanently</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h3>Language Selector (HTMX + Hyperscript):</h3>
|
||
|
|
|
||
|
|
<!-- Skeleton Loader -->
|
||
|
|
<div id="skeleton-loader">
|
||
|
|
<div>🔄 LOADING... (This should disappear!)</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- This wrapper has the hyperscript handlers -->
|
||
|
|
<div class="language-selector-wrapper"
|
||
|
|
_="on htmx:beforeRequest from .selector-btn
|
||
|
|
add .active to #skeleton-loader
|
||
|
|
log 'BEFORE: Skeleton activated'
|
||
|
|
end
|
||
|
|
on htmx:afterSwap from .selector-btn
|
||
|
|
wait 100ms
|
||
|
|
remove .active from #skeleton-loader
|
||
|
|
log 'AFTER: Skeleton deactivated'
|
||
|
|
end">
|
||
|
|
|
||
|
|
<!-- This inner element gets swapped (outerHTML) -->
|
||
|
|
<div class="language-selector" id="language-selector">
|
||
|
|
<button class="selector-btn active"
|
||
|
|
hx-get="/mock-response-en"
|
||
|
|
hx-target="#language-selector"
|
||
|
|
hx-swap="outerHTML swap:250ms settle:250ms"
|
||
|
|
onclick="mockSwitch('en')">
|
||
|
|
English
|
||
|
|
</button>
|
||
|
|
<button class="selector-btn"
|
||
|
|
hx-get="/mock-response-es"
|
||
|
|
hx-target="#language-selector"
|
||
|
|
hx-swap="outerHTML swap:250ms settle:250ms"
|
||
|
|
onclick="mockSwitch('es')">
|
||
|
|
Español
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h3>Status Monitor:</h3>
|
||
|
|
<div class="status" id="status-skeleton">
|
||
|
|
<strong>Skeleton Loader:</strong> <span id="skeleton-state">Hidden (opacity: 0)</span>
|
||
|
|
</div>
|
||
|
|
<div class="status" id="status-events">
|
||
|
|
<strong>Last Event:</strong> <span id="last-event">None</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h3>Console Log:</h3>
|
||
|
|
<div id="console"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Mock server responses since we're testing standalone
|
||
|
|
let currentLang = 'en';
|
||
|
|
|
||
|
|
function mockSwitch(lang) {
|
||
|
|
currentLang = lang;
|
||
|
|
|
||
|
|
// Simulate server delay
|
||
|
|
setTimeout(() => {
|
||
|
|
const newHTML = lang === 'en'
|
||
|
|
? `<div class="language-selector" id="language-selector">
|
||
|
|
<button class="selector-btn active" hx-get="/mock-response-en" hx-target="#language-selector" hx-swap="outerHTML swap:250ms settle:250ms" onclick="mockSwitch('en')">English</button>
|
||
|
|
<button class="selector-btn" hx-get="/mock-response-es" hx-target="#language-selector" hx-swap="outerHTML swap:250ms settle:250ms" onclick="mockSwitch('es')">Español</button>
|
||
|
|
</div>`
|
||
|
|
: `<div class="language-selector" id="language-selector">
|
||
|
|
<button class="selector-btn" hx-get="/mock-response-en" hx-target="#language-selector" hx-swap="outerHTML swap:250ms settle:250ms" onclick="mockSwitch('en')">English</button>
|
||
|
|
<button class="selector-btn active" hx-get="/mock-response-es" hx-target="#language-selector" hx-swap="outerHTML swap:250ms settle:250ms" onclick="mockSwitch('es')">Español</button>
|
||
|
|
</div>`;
|
||
|
|
|
||
|
|
// Let HTMX handle the swap
|
||
|
|
htmx.trigger('#language-selector', 'htmx:beforeSwap', {
|
||
|
|
serverResponse: newHTML
|
||
|
|
});
|
||
|
|
}, 300);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Monitor skeleton state
|
||
|
|
const skeleton = document.getElementById('skeleton-loader');
|
||
|
|
const statusSkeleton = document.getElementById('status-skeleton');
|
||
|
|
const statusEvents = document.getElementById('status-events');
|
||
|
|
const lastEvent = document.getElementById('last-event');
|
||
|
|
const consoleLog = document.getElementById('console');
|
||
|
|
const skeletonState = document.getElementById('skeleton-state');
|
||
|
|
|
||
|
|
function addConsoleLog(message, type = '') {
|
||
|
|
const line = document.createElement('div');
|
||
|
|
line.className = `console-line ${type}`;
|
||
|
|
line.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
|
||
|
|
consoleLog.appendChild(line);
|
||
|
|
consoleLog.scrollTop = consoleLog.scrollHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateSkeletonStatus() {
|
||
|
|
const hasActive = skeleton.classList.contains('active');
|
||
|
|
const opacity = window.getComputedStyle(skeleton).opacity;
|
||
|
|
|
||
|
|
skeletonState.textContent = hasActive
|
||
|
|
? `Visible (opacity: ${opacity})`
|
||
|
|
: `Hidden (opacity: ${opacity})`;
|
||
|
|
|
||
|
|
statusSkeleton.className = hasActive ? 'status active' : 'status';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Watch for class changes on skeleton
|
||
|
|
const observer = new MutationObserver(() => {
|
||
|
|
updateSkeletonStatus();
|
||
|
|
const hasActive = skeleton.classList.contains('active');
|
||
|
|
addConsoleLog(
|
||
|
|
hasActive ? 'Skeleton SHOWN (.active added)' : 'Skeleton HIDDEN (.active removed)',
|
||
|
|
'skeleton'
|
||
|
|
);
|
||
|
|
});
|
||
|
|
observer.observe(skeleton, { attributes: true, attributeFilter: ['class'] });
|
||
|
|
|
||
|
|
// Monitor HTMX events
|
||
|
|
document.body.addEventListener('htmx:beforeRequest', (e) => {
|
||
|
|
if (e.detail.elt.classList.contains('selector-btn')) {
|
||
|
|
addConsoleLog('htmx:beforeRequest - Language switch starting', 'before');
|
||
|
|
lastEvent.textContent = 'htmx:beforeRequest';
|
||
|
|
statusEvents.className = 'status active';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.body.addEventListener('htmx:afterSwap', (e) => {
|
||
|
|
if (e.detail.target.id === 'language-selector') {
|
||
|
|
addConsoleLog('htmx:afterSwap - Language switch complete', 'after');
|
||
|
|
lastEvent.textContent = 'htmx:afterSwap';
|
||
|
|
statusEvents.className = 'status active';
|
||
|
|
|
||
|
|
// Re-initialize hyperscript on new elements
|
||
|
|
htmx.process(document.querySelector('.language-selector-wrapper'));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initial status
|
||
|
|
addConsoleLog('Test page loaded - Ready to test', 'skeleton');
|
||
|
|
updateSkeletonStatus();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|