fix(api): kill currentPortId persist race + dedupe admin/ports stampede

The dashboard and residential interest smoke tests were intermittently
failing with the page rendering empty/skeleton state. Root causes:

1. ui-store persisted currentPortId/Slug, but those are URL-derived state.
   After login lands on /<first-port-by-name>/dashboard, localStorage holds
   that port. Hard-navigating to /port-nimara/... rehydrated the store with
   the stale id, and useQuery fired with the wrong port before
   PortProvider's URL-sync useEffect could correct it. Drop both fields
   from partialize — PortProvider re-derives them from the route every
   navigation.

2. apiFetch's slug-to-port fallback fired N parallel /api/v1/admin/ports
   calls when N components mounted simultaneously with an empty store.
   Dedupe in-flight lookups so a stampede collapses into one round-trip.

Also tightened four flaky smoke tests that depended on a fixed 3s wait or
non-waiting isVisible({timeout}) — replaced with expect(...).toBeVisible
or expect.poll so they handle dev-mode JIT cold-start delays cleanly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
2026-04-28 04:38:57 +02:00
parent 259cd7b8bb
commit 0406778c44
6 changed files with 74 additions and 28 deletions

View File

@@ -10,21 +10,33 @@ export interface ApiFetchOptions extends Omit<RequestInit, 'body'> {
* Avoids re-fetching `/api/v1/admin/ports` on every request when the Zustand
* store hasn't hydrated yet (fresh browser context, e2e tests, hard reload). */
const slugToIdCache = new Map<string, string>();
/** Dedupe in-flight admin/ports lookups so a stampede of parallel apiFetch
* calls (typical on dashboard mount) collapses into a single network round-
* trip instead of N. */
let inFlightPortsLookup: Promise<Array<{ id: string; slug: string }> | null> | null = null;
async function resolvePortIdFromSlug(slug: string): Promise<string | null> {
const cached = slugToIdCache.get(slug);
if (cached) return cached;
try {
const res = await fetch('/api/v1/admin/ports', { credentials: 'include' });
if (!res.ok) return null;
const body = (await res.json()) as { data?: Array<{ id: string; slug: string }> };
const port = body.data?.find((p) => p.slug === slug);
if (!port) return null;
slugToIdCache.set(slug, port.id);
return port.id;
} catch {
return null;
if (!inFlightPortsLookup) {
inFlightPortsLookup = (async () => {
try {
const res = await fetch('/api/v1/admin/ports', { credentials: 'include' });
if (!res.ok) return null;
const body = (await res.json()) as { data?: Array<{ id: string; slug: string }> };
return body.data ?? null;
} catch {
return null;
}
})().finally(() => {
inFlightPortsLookup = null;
});
}
const ports = await inFlightPortsLookup;
const port = ports?.find((p) => p.slug === slug);
if (!port) return null;
slugToIdCache.set(slug, port.id);
return port.id;
}
/**