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:
@@ -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"
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user