fix(webui): prevent redundant thread and media reloads (#5164)

webui/src/lib/api.ts

@@ -171,6 +171,7 @@ export interface FetchWebuiThreadOptions {
   limit?: number;
   direction?: "latest";
   before?: string | null;
+  signal?: AbortSignal;
 }
 
 export async function fetchWebuiThread(
@@ -192,6 +193,7 @@ export async function fetchWebuiThread(
     headers: { Authorization: `Bearer ${token}` },
     credentials: "same-origin",
     cache: "no-store",
+    signal: options?.signal,
   });
   if (res.status === 404) return null;
   if (!res.ok) throw new ApiError(res.status, `HTTP ${res.status}`);

webui/src/lib/http.ts

@@ -12,22 +12,32 @@ export async function fetchWithTimeout(
   const controller = typeof AbortController !== "undefined"
     ? new AbortController()
     : null;
+  const externalSignal = init.signal;
+  const abortFromExternal = () => controller?.abort();
   let timeoutId: ReturnType<typeof setTimeout> | undefined;
 
-  const request = fetch(input, {
-    ...init,
-    signal: controller?.signal ?? init.signal,
-  });
-  const timeout = new Promise<Response>((_, reject) => {
-    timeoutId = setTimeout(() => {
-      reject(new Error(`Request timed out after ${timeoutMs}ms`));
-      controller?.abort();
-    }, timeoutMs);
-  });
+  if (controller && externalSignal) {
+    if (externalSignal.aborted) {
+      controller.abort();
+    } else {
+      externalSignal.addEventListener("abort", abortFromExternal, { once: true });
+    }
+  }
 
   try {
+    const request = fetch(input, {
+      ...init,
+      signal: controller?.signal ?? externalSignal,
+    });
+    const timeout = new Promise<Response>((_, reject) => {
+      timeoutId = setTimeout(() => {
+        reject(new Error(`Request timed out after ${timeoutMs}ms`));
+        controller?.abort();
+      }, timeoutMs);
+    });
     return await Promise.race([request, timeout]);
   } finally {
     if (timeoutId !== undefined) clearTimeout(timeoutId);
+    externalSignal?.removeEventListener("abort", abortFromExternal);
   }
 }