"Enhance loading experience and optimize theme application

Added a fallback background and a preload lock for smoother loading transitions. Improved theme application by applying it prior to React rendering and removed theme flash. Adjusted Service Worker registration for better performance and reliability."

frontend/index.html

@@ -2,12 +2,48 @@
 <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>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Fallback Background (vor CSS/JS) -->
+    <style>
+      html {
+        background: #000;
+      }
+
+      body {
+        margin: 0;
+        background: radial-gradient(
+          ellipse at top,
+          rgba(30, 30, 30, 0.9),
+          #000
+        );
+      }
+
+      /* 🔒 Preload Lock */
+      body.preload {
+        opacity: 0;
+      }
+
+      body.ready {
+        opacity: 1;
+        transition: opacity 140ms ease;
+      }
+    </style>
+
+    <!-- Theme-Key sofort setzen (kein FOUC) -->
     <script>
       try {
         const k = localStorage.getItem("hpTheme:guest") || "default";
@@ -15,7 +51,8 @@
       } catch {}
     </script>
   </head>
-  <body>
+
+  <body class="preload">
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

frontend/src/main.jsx

@@ -4,6 +4,7 @@ import App from "./App.jsx";
 import { applyTheme, DEFAULT_THEME_KEY } from "./styles/themes";
 import { registerSW } from "virtual:pwa-register";
 
+// ✅ Theme VOR React setzen (kein Theme-Flash)
 try {
   const key = localStorage.getItem("hpTheme:guest") || DEFAULT_THEME_KEY;
   applyTheme(key);
@@ -11,12 +12,17 @@ try {
   applyTheme(DEFAULT_THEME_KEY);
 }
 
+// ✅ Preload Unlock (nach Theme!)
+document.body.classList.remove("preload");
+document.body.classList.add("ready");
+
 ReactDOM.createRoot(document.getElementById("root")).render(<App />);
-registerSW({ immediate: true });
+
+// ✅ Service Worker NUR EINMAL registrieren
 const updateSW = registerSW({
-    immediate: true,
+  immediate: true,
-    onNeedRefresh() {
+  onNeedRefresh() {
-      updateSW(true); // sofort neue Version aktivieren
+    updateSW(true);
-      window.location.reload();
+    window.location.reload();
-    },
+  },
-  });
+});