system

components/main/system/SystemView.tsx

@@ -14,6 +14,7 @@ import { getSystemspannung15VminusThunk } from "@/redux/thunks/getSystemspannung
 import { getSystemspannung98VminusThunk } from "@/redux/thunks/getSystemspannung98VminusThunk";
 import { getTemperaturAdWandlerThunk } from "@/redux/thunks/getTemperaturAdWandlerThunk";
 import { getTemperaturProzessorThunk } from "@/redux/thunks/getTemperaturProzessorThunk";
+import { ClipLoader } from "react-spinners";
 
 const SystemPage = () => {
   const dispatch = useDispatch<AppDispatch>();
@@ -24,6 +25,7 @@ const SystemPage = () => {
   const history = useSelector(
     (state: RootState) => state.systemVoltTemp.history
   ) as HistoryEntry[];
+  const isLoading = !history.length || Object.keys(voltages).length === 0;
 
   const [selectedKey, setSelectedKey] = useState<string | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -62,8 +64,26 @@ const SystemPage = () => {
       <h1 className="text-xl font-bold mb-4">
         System Spannungen & Temperaturen
       </h1>
-      <SystemOverviewGrid voltages={voltages} onOpenDetail={handleOpenDetail} />
-      <SystemCharts history={history} zeitraum={zeitraum} />
+
+      {isLoading ? (
+        <div className="flex justify-center items-center h-[400px]">
+          <div className="text-center">
+            <ClipLoader size={50} color="#3B82F6" />
+            <p className="mt-4 text-gray-500">
+              Lade Systemdaten … bitte warten
+            </p>
+          </div>
+        </div>
+      ) : (
+        <>
+          <SystemOverviewGrid
+            voltages={voltages}
+            onOpenDetail={handleOpenDetail}
+          />
+          <SystemCharts history={history} zeitraum={zeitraum} />
+        </>
+      )}
+
       <DetailModal
         isOpen={isModalOpen}
         selectedKey={selectedKey}