feat: Ladeanzeige mit PulseLoader vor Chart-Anzeige eingebaut

- Während Daten geladen werden, wird PulseLoader angezeigt
- Chart wird erst gerendert, wenn isLoading === false
- Canvas wird mit display:none ausgeblendet, solange geladen wird

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>
   );
 };

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;