From b6e83ec1e5e6b3893d709d5af8eaca14135cd7f7 Mon Sep 17 00:00:00 2001
From: Ismail Ali <ismailali1553@gmail.com>
Date: Wed, 9 Apr 2025 07:35:33 +0200
Subject: [PATCH] feat: Ladeanzeige mit PulseLoader vor Chart-Anzeige eingebaut
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Während Daten geladen werden, wird PulseLoader angezeigt
- Chart wird erst gerendert, wenn isLoading === false
- Canvas wird mit display:none ausgeblendet, solange geladen wird
---
 .../LoopMeasurementChart.tsx                  | 24 ++++++++++++++++---
 config/webVersion.ts                          |  2 +-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
index 5bc9d75..1ef4fe8 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
@@ -29,6 +29,7 @@ ChartJS.register(
   Filler
 );
 import { getColor } from "../../../../../../utils/colors";
+import { PulseLoader } from "react-spinners";
 const usePreviousData = (data: any[]) => {
   const ref = useRef<any[]>([]);
   useEffect(() => {
@@ -41,8 +42,13 @@ const LoopMeasurementChart = () => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const chartInstance = useRef<ChartJS | null>(null);
 
-  const { loopMeasurementCurveChartData, selectedMode, unit, isFullScreen } =
-    useSelector((state: RootState) => state.kabelueberwachungChartSlice);
+  const {
+    loopMeasurementCurveChartData,
+    selectedMode,
+    unit,
+    isFullScreen,
+    isLoading,
+  } = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
 
   const previousData = usePreviousData(loopMeasurementCurveChartData);
 
@@ -177,7 +183,19 @@ const LoopMeasurementChart = () => {
 
   return (
     <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
-      <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />
+      {isLoading && (
+        <div className="flex items-center justify-center h-96">
+          <PulseLoader color="#3B82F6" />
+        </div>
+      )}
+      <canvas
+        ref={canvasRef}
+        style={{
+          width: "100%",
+          height: "100%",
+          display: isLoading ? "none" : "block",
+        }}
+      />
     </div>
   );
 };
diff --git a/config/webVersion.ts b/config/webVersion.ts
index 2e8898d..8ae818b 100644
--- a/config/webVersion.ts
+++ b/config/webVersion.ts
@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.215";
+const webVersion = "1.6.216";
 export default webVersion;