bf fixes
This commit is contained in:
juanatsap
@@ -0,0 +1,287 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user