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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user