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

Replace preload mechanism with splash screen

Browse Source 
The preload class was replaced by a more user-friendly splash screen design. This change ensures a smoother transition while loading assets and eliminates black background flashes. The splash overlay is automatically hidden and removed after the app is ready, providing a seamless loading experience.
This commit is contained in:
Sascha Nesterovic
2026-02-06 18:49:25 +01:00
parent e975d7aa25
commit 57cb9a57ef
2 changed files with 50 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/index.html
View File

@@ -2,10 +2,7 @@
<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>
@@ -17,33 +14,49 @@
rel="stylesheet"
/>
<!-- Fallback Background (vor CSS/JS) -->
<!-- Fallback Background (IMMER sichtbar, kein Schwarz) -->
<style>
html {
background: #000;
}
html,
body {
margin: 0;
height: 100%;
background: radial-gradient(
ellipse at top,
rgba(30, 30, 30, 0.9),
rgba(30, 30, 30, 0.95),
#000
);
}
/* 🔒 Preload Lock */
body.preload {
opacity: 0;
/* Splash Overlay */
#app-splash {
position: fixed;
inset: 0;
z-index: 2147483647;
display: grid;
place-items: center;
background: radial-gradient(
ellipse at top,
rgba(30, 30, 30, 0.95),
#000
);
transition: opacity 160ms ease;
}
body.ready {
opacity: 1;
transition: opacity 140ms ease;
#app-splash.hide {
opacity: 0;
pointer-events: none;
}
#app-splash .title {
font-family: "Cinzel Decorative", serif;
font-weight: 700;
letter-spacing: 0.08em;
color: rgba(233, 216, 166, 0.85);
font-size: 18px;
}
</style>
<!-- Theme-Key sofort setzen (kein FOUC) -->
<!-- Theme-Key sofort setzen -->
<script>
try {
const k = localStorage.getItem("hpTheme:guest") || "default";
@@ -52,7 +65,12 @@
</script>
</head>
<body class="preload">
<body>
<!-- ✅ Splash ist sichtbar, App lädt dahinter -->
<div id="app-splash">
<div class="title">Zauber-Detektiv Notizbogen</div>
</div>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>

26
frontend/src/main.jsx
View File

@@ -13,27 +13,29 @@ async function bootstrap() {
applyTheme(DEFAULT_THEME_KEY);
}
// ✅ Warten bis ALLE Fonts geladen sind
// ✅ Fonts abwarten (kein Layout-Jump)
try {
if (document.fonts && document.fonts.ready) {
if (document.fonts?.ready) {
await document.fonts.ready;
}
} catch {
// ignore
}
// ✅ Erst JETZT sichtbar machen
document.body.classList.remove("preload");
document.body.classList.add("ready");
} catch {}
// React rendern
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
// ✅ Service Worker – KEIN Auto-Reload mehr
// ✅ Splash sauber ausblenden (KEIN Schwarz)
const splash = document.getElementById("app-splash");
if (splash) {
requestAnimationFrame(() => splash.classList.add("hide"));
setTimeout(() => splash.remove(), 220);
}
// ✅ Service Worker ohne Reload-Flash
registerSW({
immediate: true,
onNeedRefresh() {
console.info("Neue Version verfügbar – Reload manuell");
// optional: später Toast „Update verfügbar“
console.info("Neue Version verfügbar");
// später Toast möglich
},
});
}