liamwarfield
391d18a11e
Add background color to #main in loader styles to prevent white flash while app CSS loads after WASM initialization. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
69 lines
1.9 KiB
JavaScript
69 lines
1.9 KiB
JavaScript
// Loading screen that displays while WASM loads
|
|
(function() {
|
|
// Create and inject loader styles immediately (head exists)
|
|
var style = document.createElement('style');
|
|
style.textContent =
|
|
'.wasm-loader {' +
|
|
'position: fixed;' +
|
|
'top: 0;' +
|
|
'left: 0;' +
|
|
'width: 100%;' +
|
|
'height: 100%;' +
|
|
'background-color: oklch(0.15 0.01 338.64);' +
|
|
'display: flex;' +
|
|
'align-items: center;' +
|
|
'justify-content: center;' +
|
|
'z-index: 9999;' +
|
|
'transition: opacity 0.3s ease-out;' +
|
|
'}' +
|
|
'.wasm-loader.hidden {' +
|
|
'opacity: 0;' +
|
|
'pointer-events: none;' +
|
|
'}' +
|
|
'.wasm-spinner {' +
|
|
'width: 48px;' +
|
|
'height: 48px;' +
|
|
'border: 4px solid rgba(123, 173, 159, 0.2);' +
|
|
'border-top-color: #7bad9f;' +
|
|
'border-radius: 50%;' +
|
|
'animation: wasm-spin 1s linear infinite;' +
|
|
'}' +
|
|
'@keyframes wasm-spin {' +
|
|
'to { transform: rotate(360deg); }' +
|
|
'}' +
|
|
'#main {' +
|
|
'background-color: oklch(0.15 0.01 338.64);' +
|
|
'}';
|
|
document.head.appendChild(style);
|
|
|
|
function init() {
|
|
// Create loader element
|
|
var loader = document.createElement('div');
|
|
loader.className = 'wasm-loader';
|
|
loader.innerHTML = '<div class="wasm-spinner"></div>';
|
|
document.body.appendChild(loader);
|
|
|
|
// Watch for Dioxus to mount content in #main
|
|
var observer = new MutationObserver(function(mutations, obs) {
|
|
var main = document.getElementById('main');
|
|
if (main && main.children.length > 0) {
|
|
loader.classList.add('hidden');
|
|
setTimeout(function() { loader.remove(); }, 300);
|
|
obs.disconnect();
|
|
}
|
|
});
|
|
|
|
observer.observe(document.body, {
|
|
childList: true,
|
|
subtree: true
|
|
});
|
|
}
|
|
|
|
// Wait for body to exist
|
|
if (document.body) {
|
|
init();
|
|
} else {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
}
|
|
})();
|