nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"Enhance loading experience and optimize theme application

Browse Source 
Added a fallback background and a preload lock for smoother loading transitions. Improved theme application by applying it prior to React rendering and removed theme flash. Adjusted Service Worker registration for better performance and reliability."
This commit is contained in:
Sascha Nesterovic
2026-02-06 18:44:44 +01:00
parent 070057afb3
commit 7c4754e506
2 changed files with 55 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/index.html
View File

@@ -2,12 +2,48 @@
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta name="theme-color" content="#000000" />
<title>Cluedo Sheet</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap"
rel="stylesheet"
/>
<!-- Fallback Background (vor CSS/JS) -->
<style>
html {
background: #000;
}
body {
margin: 0;
background: radial-gradient(
ellipse at top,
rgba(30, 30, 30, 0.9),
#000
);
}
/* 🔒 Preload Lock */
body.preload {
opacity: 0;
}
body.ready {
opacity: 1;
transition: opacity 140ms ease;
}
</style>
<!-- Theme-Key sofort setzen (kein FOUC) -->
<script>
try {
const k = localStorage.getItem("hpTheme:guest") || "default";
@@ -15,7 +51,8 @@
} catch {}
</script>
</head>
<body>
<body class="preload">
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>