fix(frontend): replay row-flash on every refetch via dataUpdatedAt key

The previous static key={c.id} let React reuse the same <TableRow>
element across refetches, so animate-row-flash only played on
initial mount and on the first render of a brand-new claim_id.
Updated rows whose claim_id was unchanged never re-flashed.

Re-keying on `${c.id}-${dataUpdatedAt}` re-mounts the row on
every refetch (initial load, filter change, parse invalidation),
so the 1.2s accent-tint flash replays each time.

Also: README's 'Frontend unit tests (when added)' is stale — npm
test now exists and runs 3 passing tests.

hooks: add dataUpdatedAt: 0 to the !isConfigured fallback return
so the pages type-check.
This commit is contained in:
Tyler
2026-06-19 20:00:05 -06:00
parent fbd03cd321
commit 87cd51e1fc
5 changed files with 10 additions and 8 deletions
+5 -5
View File
@@ -63,7 +63,7 @@ export function Claims() {
offset: (page - 1) * PAGE_SIZE,
};
const { data, isLoading, isError, error, refetch } = useClaims(params);
const { data, isLoading, isError, error, refetch, dataUpdatedAt } = useClaims(params);
const items = data?.items ?? [];
const totals = useMemo(
@@ -224,12 +224,12 @@ export function Claims() {
const provider = providerMap[c.providerNpi];
return (
<TableRow
key={c.id}
key={`${c.id}-${dataUpdatedAt}`}
className={cn(
"animate-row-flash",
// Suppress flash when filtering so only the new
// page's first paint flashes; subsequent renders
// use the existing fade-in from the page wrapper.
// Re-keying on dataUpdatedAt re-mounts the row on
// every refetch (initial load, filter change, parse
// invalidation) so the row-flash keyframe replays.
)}
>
<TableCell>