From 57cb9a57efe88f2f2946d30617213e5fccb070f2 Mon Sep 17 00:00:00 2001 From: nessi Date: Fri, 6 Feb 2026 18:49:25 +0100 Subject: [PATCH] Replace preload mechanism with splash screen 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. --- frontend/index.html | 54 ++++++++++++++++++++++++++++--------------- frontend/src/main.jsx | 26 +++++++++++---------- 2 files changed, 50 insertions(+), 30 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index ab00530..3ff78dc 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,10 +2,7 @@ - + Cluedo Sheet @@ -17,33 +14,49 @@ rel="stylesheet" /> - + - + - + + +
+
Zauber-Detektiv Notizbogen
+
+
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 0a6689c..58ec495 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -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(); - // ✅ 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 }, }); }