[CSM Portal] Cap and stagger dashboard widget loading to reduce backend load

apps/csm-portal/webapp/src/api/backend/client.ts

@@ -80,9 +80,22 @@ async function readError(
  * fetch and JSON (de)serialization. 404s on GET resolve to `null` so the
  * common "not found" case can be handled without exceptions.
  */
+/** Per-call options accepted by {@link BackendApi.post} on top of its
+ * `path`/`body` — currently just an optional `AbortSignal`, forwarded
+ * straight through to the underlying `fetch`. Its own object type (rather
+ * than a bare `AbortSignal` parameter) so a future addition here doesn't
+ * need every existing call site to learn a new positional argument. */
+export interface BackendApiPostOptions {
+  signal?: AbortSignal;
+}
+
 export interface BackendApi {
   get<T>(path: string): Promise<T | null>;
-  post<TRequest, TResponse>(path: string, body: TRequest): Promise<TResponse>;
+  post<TRequest, TResponse>(
+    path: string,
+    body: TRequest,
+    options?: BackendApiPostOptions,
+  ): Promise<TResponse>;
   patch<TRequest, TResponse>(path: string, body: TRequest): Promise<TResponse>;
   postEmpty<TResponse>(path: string): Promise<TResponse>;
   /** Authenticated DELETE. Returns the parsed JSON body (`null` on 204). */
@@ -126,6 +139,7 @@ export function useBackendApi(): BackendApi {
       async post<TRequest, TResponse>(
         path: string,
         body: TRequest,
+        options?: BackendApiPostOptions,
       ): Promise<TResponse> {
         const correlationId = newCorrelationId();
         const response = await authFetch(buildUrl(path), {
@@ -135,6 +149,7 @@ export function useBackendApi(): BackendApi {
             [CORRELATION_ID_HEADER]: correlationId,
           },
           body: JSON.stringify(body),
+          signal: options?.signal,
         });
         if (!response.ok) throw await readError(response, correlationId);
         return (await response.json()) as TResponse;

apps/csm-portal/webapp/src/features/csm-admin/dashboards/components/WidgetEditorDialog.test.tsx

@@ -100,10 +100,14 @@ describe("WidgetEditorDialog", () => {
     fireEvent.click(screen.getByRole("button", { name: /^preview$/i }));
 
     await waitFor(() => expect(screen.getByText("7")).toBeInTheDocument());
-    expect(postMock).toHaveBeenCalledWith("/cases/search", {
-      filters: {},
-      pagination: { offset: 0, limit: 1 },
-    });
+    expect(postMock).toHaveBeenCalledWith(
+      "/cases/search",
+      {
+        filters: {},
+        pagination: { offset: 0, limit: 1 },
+      },
+      { signal: expect.any(AbortSignal) },
+    );
   });
 
   it("shows nothing fetched until Preview is explicitly clicked", () => {
@@ -172,10 +176,14 @@ describe("WidgetEditorDialog", () => {
     fireEvent.click(screen.getByRole("button", { name: /^preview$/i }));
 
     await waitFor(() =>
-      expect(postMock).toHaveBeenCalledWith("/cases/search", {
-        filters: { filters: [{ field: "integrationCsTeam", op: "in", values: ["team-group-1"] }] },
-        pagination: { offset: 0, limit: 1 },
-      }),
+      expect(postMock).toHaveBeenCalledWith(
+        "/cases/search",
+        {
+          filters: { filters: [{ field: "integrationCsTeam", op: "in", values: ["team-group-1"] }] },
+          pagination: { offset: 0, limit: 1 },
+        },
+        { signal: expect.any(AbortSignal) },
+      ),
     );
   });