Add AbortController cleanup to async frontend effects

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(