hanzo/world
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(04-01): add no-transition class lifecycle for FOUC prevention

Browse Source 
- index.html and settings.html FOUC scripts add no-transition class to <html>
- src/main.ts removes no-transition after first paint via requestAnimationFrame
- src/settings-main.ts removes no-transition after first paint via requestAnimationFrame
- Prevents transition sweep from dark-to-light on page load while enabling smooth theme toggles
This commit is contained in:
Sebastien Melki
2026-02-16 17:17:30 +02:00
parent dc4c3f023e
commit eb61ad0aa6
4 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -92,7 +92,7 @@
<!-- Theme: apply stored preference before first paint to prevent FOUC -->
<script>(function(){try{var t=localStorage.getItem('worldmonitor-theme');if(t==='light')document.documentElement.dataset.theme='light';}catch(e){}})()</script>
<script>(function(){try{var t=localStorage.getItem('worldmonitor-theme');if(t==='light')document.documentElement.dataset.theme='light';}catch(e){}document.documentElement.classList.add('no-transition');})()</script>
<!-- Styles -->
<link rel="stylesheet" href="/src/styles/main.css" />
settings.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>World Monitor Settings</title>
<script>(function(){try{var t=localStorage.getItem('worldmonitor-theme');if(t==='light')document.documentElement.dataset.theme='light';}catch(e){}})()</script>
<script>(function(){try{var t=localStorage.getItem('worldmonitor-theme');if(t==='light')document.documentElement.dataset.theme='light';}catch(e){}document.documentElement.classList.add('no-transition');})()</script>
</head>
<body>
<div class="settings-shell">
src/main.ts
+5
View File
@@ -21,6 +21,11 @@ void loadDesktopSecrets();
// Apply stored theme preference before app initialization (safety net for inline script)
applyStoredTheme();
// Remove no-transition class after first paint to enable smooth theme transitions
requestAnimationFrame(() => {
document.documentElement.classList.remove('no-transition');
});
const app = new App('app');
app.init().catch(console.error);
src/settings-main.ts
+6
View File
@@ -64,6 +64,12 @@ function closeSettingsWindow(): void {
async function initSettingsWindow(): Promise<void> {
applyStoredTheme();
// Remove no-transition class after first paint to enable smooth theme transitions
requestAnimationFrame(() => {
document.documentElement.classList.remove('no-transition');
});
await loadDesktopSecrets();
const mount = document.getElementById('settingsApp');