Add AbortSignal support to dashboard/blocklist APIs and hooks

frontend/src/hooks/useServerStatus.ts

@@ -39,16 +39,30 @@ export function useServerStatus(): UseServerStatusResult {
   // Use a ref so the fetch function identity is stable.
   const fetchRef = useRef<() => Promise<void>>(async () => Promise.resolve());
 
+  const abortRef = useRef<AbortController | null>(null);
+
   const doFetch = useCallback(async (): Promise<void> => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
     setLoading(true);
     try {
-      const data = await fetchServerStatus();
+      const data = await fetchServerStatus(controller.signal);
+      if (controller.signal.aborted) {
+        return;
+      }
       setStatus(data.status);
       setError(null);
     } catch (err: unknown) {
+      if (controller.signal.aborted) {
+        return;
+      }
       handleFetchError(err, setError, "Failed to fetch server status");
     } finally {
-      setLoading(false);
+      if (!controller.signal.aborted) {
+        setLoading(false);
+      }
     }
   }, []);
 
@@ -74,6 +88,12 @@ export function useServerStatus(): UseServerStatusResult {
     return (): void => { window.removeEventListener("focus", onFocus); };
   }, []);
 
+  useEffect(() => {
+    return (): void => {
+      abortRef.current?.abort();
+    };
+  }, []);
+
   const refresh = useCallback((): void => {
     void doFetch().catch((): void => undefined);
   }, [doFetch]);