Add AbortController cleanup to async frontend effects

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 => {