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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user