Add AbortController cleanup to async frontend effects

frontend/src/components/blocklist/BlocklistScheduleSection.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Button, Field, Input, MessageBar, MessageBarBody, Select, Spinner, Text } from "@fluentui/react-components";
 import { PlayRegular } from "@fluentui/react-icons";
 import { useCommonSectionStyles } from "../../theme/commonStyles";
@@ -25,6 +25,7 @@ export function BlocklistScheduleSection({ onRunImport, runImportRunning }: Sche
   const { info, loading, error, saveSchedule } = useSchedule();
   const [saving, setSaving] = useState(false);
   const [saveMsg, setSaveMsg] = useState<string | null>(null);
+  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const config = info?.config ?? {
     frequency: "daily" as ScheduleFrequency,
@@ -37,12 +38,20 @@ export function BlocklistScheduleSection({ onRunImport, runImportRunning }: Sche
   const [draft, setDraft] = useState<ScheduleConfig>(config);
 
   const handleSave = useCallback((): void => {
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+      saveTimeoutRef.current = null;
+    }
+
     setSaving(true);
     saveSchedule(draft)
       .then(() => {
         setSaveMsg("Schedule saved.");
         setSaving(false);
-        setTimeout(() => { setSaveMsg(null); }, 3000);
+        saveTimeoutRef.current = setTimeout(() => {
+          setSaveMsg(null);
+          saveTimeoutRef.current = null;
+        }, 3000);
       })
       .catch((err: unknown) => {
         setSaveMsg(err instanceof Error ? err.message : "Failed to save schedule");
@@ -50,6 +59,14 @@ export function BlocklistScheduleSection({ onRunImport, runImportRunning }: Sche
       });
   }, [draft, saveSchedule]);
 
+  useEffect(() => {
+    return (): void => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
+  }, []);
+
   return (
     <div className={sectionStyles.section}>
       <div className={sectionStyles.sectionHeader}>