Add AbortController cleanup to async frontend effects

frontend/src/hooks/useActionConfig.ts

@@ -24,7 +24,10 @@ export interface UseActionConfigResult {
  * @param name - Action base name (e.g. ``"iptables"``).
  */
 export function useActionConfig(name: string): UseActionConfigResult {
-  const fetchFn = useCallback(() => fetchAction(name), [name]);
+  const fetchFn = useCallback(
+    (signal: AbortSignal) => fetchAction(name, signal),
+    [name],
+  );
   const saveFn = useCallback(
     (update: ActionConfigUpdate) => updateAction(name, update),
     [name],

frontend/src/hooks/useBans.ts

@@ -51,6 +51,7 @@ export function useBans(
   const [page, setPage] = useState<number>(1);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
 
   // Reset page when time range, origin filter, or source changes.
   useEffect(() => {
@@ -58,16 +59,25 @@ export function useBans(
   }, [timeRange, origin, source]);
 
   const doFetch = useCallback(async (): Promise<void> => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
     setLoading(true);
     setError(null);
+
     try {
-      const data = await fetchBans(timeRange, page, PAGE_SIZE, origin, source);
+      const data = await fetchBans(timeRange, page, PAGE_SIZE, origin, source, controller.signal);
+      if (controller.signal.aborted) return;
       setBanItems(data.items);
       setTotal(data.total);
     } catch (err: unknown) {
+      if (controller.signal.aborted) return;
       handleFetchError(err, setError, "Failed to fetch bans");
     } finally {
-      setLoading(false);
+      if (!controller.signal.aborted) {
+        setLoading(false);
+      }
     }
   }, [timeRange, page, origin, source]);
 
@@ -77,6 +87,9 @@ export function useBans(
 
   useEffect(() => {
     void doFetch();
+    return (): void => {
+      abortRef.current?.abort();
+    };
   }, [doFetch]);
 
   const refresh = useCallback((): void => {

frontend/src/hooks/useFilterConfig.ts

@@ -24,7 +24,10 @@ export interface UseFilterConfigResult {
  * @param name - Filter base name (e.g. ``"sshd"``).
  */
 export function useFilterConfig(name: string): UseFilterConfigResult {
-  const fetchFn = useCallback(() => fetchParsedFilter(name), [name]);
+  const fetchFn = useCallback(
+    (signal: AbortSignal) => fetchParsedFilter(name, signal),
+    [name],
+  );
   const saveFn = useCallback(
     (update: FilterConfigUpdate) => updateParsedFilter(name, update),
     [name],

frontend/src/hooks/useJailFileConfig.ts

@@ -22,7 +22,10 @@ export interface UseJailFileConfigResult {
  * @param filename - Filename including extension (e.g. ``"sshd.conf"``).
  */
 export function useJailFileConfig(filename: string): UseJailFileConfigResult {
-  const fetchFn = useCallback(() => fetchParsedJailFile(filename), [filename]);
+  const fetchFn = useCallback(
+    (signal: AbortSignal) => fetchParsedJailFile(filename, signal),
+    [filename],
+  );
   const saveFn = useCallback(
     (update: JailFileConfigUpdate) => updateParsedJailFile(filename, update),
     [filename],

frontend/src/hooks/useMapColorThresholds.ts

@@ -19,22 +19,30 @@ export function useMapColorThresholds(): UseMapColorThresholdsResult {
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
-  const load = useCallback(async (): Promise<void> => {
+  const load = useCallback(async (signal?: AbortSignal): Promise<void> => {
     setLoading(true);
     setError(null);
 
     try {
-      const data = await fetchMapColorThresholds();
+      const data = await fetchMapColorThresholds(signal);
+      if (signal?.aborted) return;
       setThresholds(data);
     } catch (err: unknown) {
+      if (signal?.aborted) return;
       handleFetchError(err, setError, "Failed to fetch map color thresholds");
     } finally {
-      setLoading(false);
+      if (!signal?.aborted) {
+        setLoading(false);
+      }
     }
   }, []);
 
   useEffect(() => {
-    void load();
+    const controller = new AbortController();
+    void load(controller.signal);
+    return (): void => {
+      controller.abort();
+    };
   }, [load]);
 
   const updateThresholds = useCallback(

frontend/src/hooks/useSchedule.ts

@@ -23,16 +23,27 @@ export function useSchedule(): UseScheduleReturn {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    const controller = new AbortController();
     setLoading(true);
-    fetchSchedule()
+    setError(null);
+
+    fetchSchedule(controller.signal)
       .then((data) => {
+        if (controller.signal.aborted) return;
         setInfo(data);
-        setLoading(false);
       })
       .catch((err: unknown) => {
+        if (controller.signal.aborted) return;
         handleFetchError(err, setError, "Failed to load schedule");
+      })
+      .finally(() => {
+        if (controller.signal.aborted) return;
         setLoading(false);
       });
+
+    return (): void => {
+      controller.abort();
+    };
   }, []);
 
   const saveSchedule = useCallback(async (config: ScheduleConfig): Promise<void> => {

frontend/src/hooks/useTimezoneData.ts

@@ -14,23 +14,31 @@ export function useTimezoneData(): UseTimezoneDataResult {
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
-  const load = useCallback(async (): Promise<void> => {
+  const load = useCallback(async (signal?: AbortSignal): Promise<void> => {
     setLoading(true);
     setError(null);
 
     try {
-      const resp = await fetchTimezone();
+      const resp = await fetchTimezone(signal);
+      if (signal?.aborted) return;
       setTimezone(resp.timezone);
     } catch (err: unknown) {
+      if (signal?.aborted) return;
       handleFetchError(err, setError, "Failed to fetch timezone");
       setTimezone("UTC");
     } finally {
-      setLoading(false);
+      if (!signal?.aborted) {
+        setLoading(false);
+      }
     }
   }, []);
 
   useEffect(() => {
-    void load();
+    const controller = new AbortController();
+    void load(controller.signal);
+    return (): void => {
+      controller.abort();
+    };
   }, [load]);
 
   return {