Add missing abort controller

frontend/src/api.ts

@@ -137,11 +137,13 @@ export const api = {
     fetchJson<ContactAdvertPathSummary[]>(
       `/contacts/repeaters/advert-paths?limit_per_repeater=${limitPerRepeater}`
     ),
-  getContactAnalytics: (params: { publicKey?: string; name?: string }) => {
+  getContactAnalytics: (params: { publicKey?: string; name?: string }, signal?: AbortSignal) => {
     const searchParams = new URLSearchParams();
     if (params.publicKey) searchParams.set('public_key', params.publicKey);
     if (params.name) searchParams.set('name', params.name);
-    return fetchJson<ContactAnalytics>(`/contacts/analytics?${searchParams.toString()}`);
+    return fetchJson<ContactAnalytics>(`/contacts/analytics?${searchParams.toString()}`, {
+      signal,
+    });
   },
   deleteContact: (publicKey: string) =>
     fetchJson<{ status: string }>(`/contacts/${publicKey}`, {

frontend/src/components/ContactInfoPane.tsx

@@ -10,7 +10,7 @@ import {
   ResponsiveContainer,
   Legend,
 } from 'recharts';
-import { api } from '../api';
+import { api, isAbortError } from '../api';
 import { formatTime } from '../utils/messageParser';
 import {
   getContactDisplayName,
@@ -110,29 +110,29 @@ export function ContactInfoPane({
       return;
     }
 
-    let cancelled = false;
+    const controller = new AbortController();
     setAnalytics(null);
     setLoading(true);
     const request =
       isNameOnly && nameOnlyValue
-        ? api.getContactAnalytics({ name: nameOnlyValue })
-        : api.getContactAnalytics({ publicKey: contactKey });
+        ? api.getContactAnalytics({ name: nameOnlyValue }, controller.signal)
+        : api.getContactAnalytics({ publicKey: contactKey }, controller.signal);
 
     request
       .then((data) => {
-        if (!cancelled) setAnalytics(data);
+        if (!controller.signal.aborted) setAnalytics(data);
       })
       .catch((err) => {
-        if (!cancelled) {
+        if (!isAbortError(err)) {
           console.error('Failed to fetch contact analytics:', err);
           toast.error('Failed to load contact info');
         }
       })
       .finally(() => {
-        if (!cancelled) setLoading(false);
+        if (!controller.signal.aborted) setLoading(false);
       });
     return () => {
-      cancelled = true;
+      controller.abort();
     };
   }, [contactKey, isNameOnly, nameOnlyValue]);
 

frontend/src/test/contactInfoPane.test.tsx

@@ -181,7 +181,10 @@ describe('ContactInfoPane', () => {
 
     await screen.findByText('Mystery');
     await waitFor(() => {
-      expect(getContactAnalytics).toHaveBeenCalledWith({ name: 'Mystery' });
+      expect(getContactAnalytics).toHaveBeenCalledWith(
+        { name: 'Mystery' },
+        expect.any(AbortSignal)
+      );
       expect(screen.getByText('Messages')).toBeInTheDocument();
       expect(screen.getByText('Channel Messages')).toBeInTheDocument();
       expect(screen.getByText('4', { selector: 'p' })).toBeInTheDocument();