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
This commit is contained in:
ISA
2025-07-23 13:16:57 +02:00
parent 4d48100375
commit bc554d3474
7 changed files with 24 additions and 9 deletions

View File

@@ -53,7 +53,7 @@ export default function AnalogInputsChart() {
}, []);
const dispatch = useDispatch<AppDispatch>();
const chartRef = useRef<any>(null);
const chartRef = useRef<Line>(null); // Specify Line type for chartRef
// Redux Werte für Chart-Daten
const { zeitraum, vonDatum, bisDatum, data, autoLoad, selectedId } =
@@ -114,10 +114,15 @@ 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;
setLoading(true); // Set loading to true when fetching data
// Fallback auf Redux-Werte, falls lokale Werte leer sind
const from = localVonDatum || vonDatumRedux || "";
const to = localBisDatum || bisDatumRedux || "";
@@ -154,7 +159,7 @@ export default function AnalogInputsChart() {
vonDatum: from,
bisDatum: to,
})
);
).finally(() => setLoading(false)); // Reset loading after fetch
};
// Auto-trigger fetch when a row is selected and id is not 0 (only once per selection)
@@ -347,7 +352,7 @@ export default function AnalogInputsChart() {
}, []);
return (
<div className="flex flex-col gap-3">
<div className={`flex flex-col gap-3 ${loading ? "cursor-wait" : ""}`}>
<div className="flex flex-wrap items-center gap-4 mb-2">
{/* ✅ Neuer DatePicker mit schönem Styling (lokal, ohne Redux) */}
<AnalogInputsDatePicker