feat:

Anzeige KÜ-Display:

1. Zeile Alarm: Isolationsfehler, Schleifenfehler, Aderbruch, Erdschluß, Messpannung: Immer in Rot; wenn kein Alarm, bleibt die Zeile leer

2. Zeile: Isowert: xx MOhm (großes M)

in Rot, wenn Iso-Fehler ansteht

Beispiel: ISO: 100 MOHm der beim Abliech:  ISO: Abgleich

3. Zeile: Schleifenwert, xx kOhm (kleines k)

in Rot, wenn Schleifenfehler ansteht

Beispiel:: RSL: 1,7 kOhm oder wenn Schleifenmessung aktiv: RSL: Messung

components/main/system/SystemCharts.tsx

@@ -38,6 +38,7 @@ type Props = {
   zeitraum: "DIA0" | "DIA1" | "DIA2";
 };
 export const SystemCharts = ({ history }: Props) => {
+  const [isLoading, setIsLoading] = React.useState(true);
   const reversedHistory = [...history].reverse();
   const labels = reversedHistory.map((h) =>
     new Date(h.time).toLocaleTimeString()
@@ -45,9 +46,21 @@ export const SystemCharts = ({ history }: Props) => {
 
   const formatValue = (v: number) => v.toFixed(2);
 
+  // Chart.js animation callback
+  const animation = {
+    onComplete: () => {
+      setIsLoading(false);
+    },
+  };
+
+  React.useEffect(() => {
+    setIsLoading(true);
+  }, [history]);
+
   const baseOptions = {
     responsive: true,
     maintainAspectRatio: false,
+    animation,
     scales: {
       y: {
         beginAtZero: false,
@@ -65,7 +78,11 @@ export const SystemCharts = ({ history }: Props) => {
   };
 
   return (
-    <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+    <div
+      className={`grid grid-cols-1 xl:grid-cols-2 gap-8 ${
+        isLoading ? "cursor-wait" : ""
+      }`}
+    >
       <div className="h-[300px]">
         <Line
           data={{