Enhance loading screen with animation and splash improvements

Updated the loading screen to include animated gold lines, a loader, and a spark effect. Adjusted splash visibility to ensure a minimum display time of 3 seconds and improved transitions for smoother visuals. Enhanced style and structure for better user experience during app initialization.
This commit is contained in:
2026-02-06 18:52:16 +01:00
parent 57cb9a57ef
commit 62439d2d28
2 changed files with 133 additions and 19 deletions

View File

@@ -5,7 +5,7 @@ import { applyTheme, DEFAULT_THEME_KEY } from "./styles/themes";
import { registerSW } from "virtual:pwa-register";
async function bootstrap() {
// Theme sofort setzen
// Theme sofort setzen
try {
const key = localStorage.getItem("hpTheme:guest") || DEFAULT_THEME_KEY;
applyTheme(key);
@@ -13,29 +13,37 @@ async function bootstrap() {
applyTheme(DEFAULT_THEME_KEY);
}
// Fonts abwarten (kein Layout-Jump)
// Fonts abwarten (verhindert Layout-Sprung)
try {
if (document.fonts?.ready) {
await document.fonts.ready;
}
} catch {}
// React rendern
// App rendern
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
// Splash sauber ausblenden (KEIN Schwarz)
const splash = document.getElementById("app-splash");
if (splash) {
requestAnimationFrame(() => splash.classList.add("hide"));
setTimeout(() => splash.remove(), 220);
}
// Splash mind. 3 Sekunden anzeigen (3000ms)
const MIN_SPLASH_MS = 3000;
const tStart = performance.now();
// ✅ Service Worker ohne Reload-Flash
const hideSplash = () => {
const splash = document.getElementById("app-splash");
if (!splash) return;
splash.classList.add("hide");
setTimeout(() => splash.remove(), 320);
};
const elapsed = performance.now() - tStart;
const remaining = Math.max(0, MIN_SPLASH_MS - elapsed);
setTimeout(hideSplash, remaining);
// Service Worker ohne Auto-Reload-Flash
registerSW({
immediate: true,
onNeedRefresh() {
console.info("Neue Version verfügbar");
// später Toast möglich
// optional: später Toast "Update verfügbar"
},
});
}