deviceName in Header bekommt die Name und nicht mehr lädt.. oder unbekannt

components/Header.jsx

@@ -1,4 +1,3 @@
-// components/Header.jsx
 "use client";
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
@@ -10,19 +9,22 @@ function Header() {
   const [cplStatus, setCplStatus] = useState("Lädt...");
   const [showSettingsModal, setShowSettingsModal] = useState(false);
 
-  // Flag außerhalb des State-Managements, um die Ausgabe nur einmal zu loggen
+  // Flag außerhalb der Funktion, um die Werte nur einmal zu setzen
   let variablesLogged = false;
   useEffect(() => {
-    const interval = setInterval(() => {
-      if (localStorage.getItem("variablesLoaded") === "true") {
-        // Lade die Werte nur, wenn die Variablen tatsächlich geladen wurden
-        setStationsname(window.deviceName || "Unbekannt");
-        setCplStatus(window.hardware_version || "Unbekannt");
-        clearInterval(interval); // Beende das Intervall, sobald die Werte gesetzt sind
+    const checkVariablesLoaded = async () => {
+      if (window.deviceName) {
+        setStationsname(window.deviceName);
+      } else {
+        // Falls die Variablen noch nicht geladen sind, erneut prüfen nach 3000 ms
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+        checkVariablesLoaded(); // Erneut aufrufen, wenn noch nicht geladen
       }
-    }, 500); // Prüfe das Flag alle 500 ms
+    };
 
-    return () => clearInterval(interval);
+    checkVariablesLoaded(); // Startet die erste Überprüfung
+
+    // Kein Cleanup erforderlich, da `setTimeout` nur bei Bedarf ausgeführt wird
   }, []);
 
   const handleSettingsClick = () => setShowSettingsModal(true);