fix(ui): drop superseded useApiResource responses when the path changes mid-flight (#7790)

useApiResource had no cancellation guard, so when path changes (pagination
offsets, free-text repo input, analytics window selection) an older request's
response could resolve after a newer one and silently overwrite it — showing the
wrong page/repo while the surrounding UI reflects the newer request. Tag each
load with an incrementing request id and drop the result after the await if a
newer load has superseded it. Fixes the class for every useApiResource consumer.

Closes #7785

Author: xfodev

apps/loopover-ui/src/lib/api/use-api-resource.test.ts

@@ -86,3 +86,32 @@ describe("useApiResource errorKind/errorStatus (#793)", () => {
     expect(state.errorKind).toBeUndefined();
   });
 });
+
+describe("useApiResource stale-response guard (#7785)", () => {
+  it("drops a superseded response when the path changed before it resolved", async () => {
+    apiFetch.mockReset();
+    let resolveOld!: (value: unknown) => void;
+    let resolveNew!: (value: unknown) => void;
+    apiFetch
+      .mockImplementationOnce(() => new Promise((resolve) => (resolveOld = resolve)))
+      .mockImplementationOnce(() => new Promise((resolve) => (resolveNew = resolve)));
+
+    const { result, rerender } = renderHook(
+      ({ path }) => useApiResource<{ page: number }>(path, "Thing"),
+      { initialProps: { path: "/v1/thing?offset=0" } },
+    );
+    // Change the path so a second load starts while the first request is still in flight.
+    rerender({ path: "/v1/thing?offset=20" });
+
+    // The NEWER (second) request resolves first and is applied.
+    resolveNew({ ok: true, data: { page: 2 }, status: 200, durationMs: 1 });
+    await waitFor(() => expect(result.current.status).toBe("ready"));
+    expect(result.current.data).toEqual({ page: 2 });
+
+    // The STALE (first) request resolves last — it must be dropped, not overwrite the current page.
+    resolveOld({ ok: true, data: { page: 1 }, status: 200, durationMs: 1 });
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(result.current.data).toEqual({ page: 2 });
+  });
+});

apps/loopover-ui/src/lib/api/use-api-resource.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { getApiOrigin } from "./origin";
 import { apiFetch, type ApiFailureKind } from "./request";
@@ -34,7 +34,15 @@ export function useApiResource<T>(
     loadedAt: null,
   });
 
+  const requestIdRef = useRef(0);
+
   const load = useCallback(async () => {
+    // Guard against out-of-order responses (#7785): when `path` changes (pagination offsets, free-text repo input,
+    // window selection) a new load starts while an older apiFetch is still in flight. Tag each load and, after the
+    // await, drop the result if a newer load has since superseded it — otherwise a stale page's response resolves
+    // last and silently overwrites the current one while the surrounding UI reflects the newer request.
+    const requestId = requestIdRef.current + 1;
+    requestIdRef.current = requestId;
     if (!enabled) {
       setState({ status: "error", data: null, error: "disabled", loadedAt: null });
       return;
@@ -47,6 +55,8 @@ export function useApiResource<T>(
       headers,
       credentials: "include",
     });
+    // A newer load superseded this one (the path changed mid-flight); drop this stale response entirely.
+    if (requestId !== requestIdRef.current) return;
     if (result.ok) {
       setState({ status: "ready", data: result.data, error: null, loadedAt: Date.now() });
     } else {