feat: Add cursor wait state to AnalogInputsTable rows during data loading

- Applied `cursor-wait` style to table rows (`<tr>`) in AnalogInputsTable when loading is true.
- Ensured consistent cursor behavior across the entire table and rows

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.637
+NEXT_PUBLIC_APP_VERSION=1.6.638
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.637
+NEXT_PUBLIC_APP_VERSION=1.6.638
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.6.638] – 2025-07-23
+
+- feat: Add cursor wait during chart data loading
+
+- Implemented cursor wait state while chart data is being loaded in `AnalogInputsChart.tsx`.
+- Fixed missing dependencies in `useEffect` and defined `loading` state.
+- Updated `handleFetchData` to manage
+
+---
 ## [1.6.637] – 2025-07-23
 
 - feat: Add cursor wait during chart data loading

components/main/analogInputs/AnalogInputsChart.tsx

@@ -42,7 +42,13 @@ ChartJS.register(
   TimeScale
 );
 
-export default function AnalogInputsChart() {
+export default function AnalogInputsChart({
+  setLoading,
+  loading,
+}: {
+  setLoading: (loading: boolean) => void;
+  loading: boolean;
+}) {
   useEffect(() => {
     if (typeof window !== "undefined") {
       import("chartjs-plugin-zoom").then((zoom) => {
@@ -119,9 +125,6 @@ export default function AnalogInputsChart() {
     setLocalBisDatum(to);
   };
 
-  // Define loading state
-  const [loading, setLoading] = React.useState(false);
-
   // ✅ Button → Redux + Fetch triggern
   const handleFetchData = () => {
     if (!selectedAnalogInput?.id) return;

components/main/analogInputs/AnalogInputsTable.tsx

@@ -14,7 +14,7 @@ import {
   setAutoLoad,
 } from "@/redux/slices/analogInputs/analogInputsHistorySlice";
 
-export default function AnalogInputsTable() {
+export default function AnalogInputsTable({ loading }: { loading: boolean }) {
   const dispatch = useDispatch<AppDispatch>();
 
   const [activeId, setActiveId] = React.useState<number | null>(null);
@@ -35,7 +35,11 @@ export default function AnalogInputsTable() {
   };
 
   return (
-    <div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full laptop:p-1 xl:p-1">
+    <div
+      className={`bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full laptop:p-1 xl:p-1 ${
+        loading ? "cursor-wait" : ""
+      }`}
+    >
       <h2 className="laptop:text-sm  md:text-base 2xl:text-lg font-bold mb-3 flex items-center">
         <Icon
           icon={waveformIcon}
@@ -44,7 +48,11 @@ export default function AnalogInputsTable() {
         Messwerteingänge
       </h2>
       <div className="overflow-x-auto">
-        <table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse">
+        <table
+          className={`w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse ${
+            loading ? "cursor-wait" : ""
+          }`}
+        >
           <thead className="bg-gray-100 border-b items-center ">
             <tr>
               <th className="border p-1 text-left">Eingang</th>
@@ -67,7 +75,9 @@ export default function AnalogInputsTable() {
                 <tr
                   key={index}
                   className={`transition cursor-pointer ${
-                    analogInput.id === activeId
+                    loading
+                      ? "cursor-wait"
+                      : analogInput.id === activeId
                       ? "bg-blue-100"
                       : "hover:bg-gray-100"
                   }`}

components/main/analogInputs/AnalogInputsView.tsx

@@ -10,15 +10,14 @@ import { useSelector } from "react-redux";
 import { RootState } from "@/redux/store";
 
 function AnalogInputsView() {
+  const [loading, setLoading] = useState(false); // Add loading state
+
   const selectedInput = useSelector(
     (state: RootState) => state.selectedAnalogInput
   );
   const selectedId = useSelector(
     (state: RootState) => state.analogInputsHistory.selectedId
   );
-  const isSettingsModalOpen = useSelector(
-    (state: RootState) => state.analogInputsUi.isSettingsModalOpen
-  );
 
   const dispatch = useAppDispatch();
 
@@ -33,21 +32,25 @@ function AnalogInputsView() {
   }, [dispatch]);
 
   return (
-    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)]">
+    <div
+      className={`flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] ${
+        loading ? "cursor-wait" : ""
+      }`}
+    >
       <div className="container mx-auto">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="bg-white rounded-lg p-4">
             <h2 className="text-xl font-semibold mb-4 text-gray-700">
               Messwerteingänge
             </h2>
-            <AnalogInputsTable />
+            <AnalogInputsTable loading={loading} />
           </div>
 
           <div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
             <h2 className="text-xl font-semibold mb-4 text-gray-700">
               Messkurve Messwerteingang {selectedId ?? "–"}
             </h2>
-            <AnalogInputsChart />
+            <AnalogInputsChart setLoading={setLoading} loading={loading} />
           </div>
         </div>
       </div>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.637",
+  "version": "1.6.638",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.637",
+      "version": "1.6.638",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.637",
+  "version": "1.6.638",
   "private": true,
   "scripts": {
     "dev": "next dev",