diff --git a/components/Header.jsx b/components/Header.jsx index 64e3897..a645339 100644 --- a/components/Header.jsx +++ b/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);