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"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta <meta name="viewport" content="width=device-width, initial-scale=1.0" />
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<title>Cluedo Sheet</title> <title>Cluedo Sheet</title>
@@ -17,33 +14,49 @@
rel="stylesheet" rel="stylesheet"
/> />
<!-- Fallback Background (vor CSS/JS) --> <!-- Fallback Background (IMMER sichtbar, kein Schwarz) -->
<style> <style>
html { html,
background: #000;
}
body { body {
margin: 0; margin: 0;
height: 100%;
background: radial-gradient( background: radial-gradient(
ellipse at top, ellipse at top,
rgba(30, 30, 30, 0.9), rgba(30, 30, 30, 0.95),
#000 #000
); );
} }
/* 🔒 Preload Lock */ /* Splash Overlay */
body.preload { #app-splash {
opacity: 0; 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 { #app-splash.hide {
opacity: 1; opacity: 0;
transition: opacity 140ms ease; 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> </style>
<!-- Theme-Key sofort setzen (kein FOUC) --> <!-- Theme-Key sofort setzen -->
<script> <script>
try { try {
const k = localStorage.getItem("hpTheme:guest") || "default"; const k = localStorage.getItem("hpTheme:guest") || "default";
@@ -52,7 +65,12 @@
</script> </script>
</head> </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> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>

26
frontend/src/main.jsx
View File

@@ -13,27 +13,29 @@ async function bootstrap() {
applyTheme(DEFAULT_THEME_KEY); applyTheme(DEFAULT_THEME_KEY);
} }
// ✅ Warten bis ALLE Fonts geladen sind // ✅ Fonts abwarten (kein Layout-Jump)
try { try {
if (document.fonts && document.fonts.ready) { if (document.fonts?.ready) {
await document.fonts.ready; await document.fonts.ready;
} }
} catch { } catch {}
// ignore
}
// ✅ Erst JETZT sichtbar machen
document.body.classList.remove("preload");
document.body.classList.add("ready");
// React rendern
ReactDOM.createRoot(document.getElementById("root")).render(<App />); 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({ registerSW({
immediate: true, immediate: true,
onNeedRefresh() { onNeedRefresh() {
console.info("Neue Version verfügbar – Reload manuell"); console.info("Neue Version verfügbar");
// optional: später Toast „Update verfügbar“ // später Toast möglich
}, },
}); });
} }