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>
+2 -2
View File
@@ -30,7 +30,7 @@ export function Remittances() {
const [page, setPage] = useState(1);
const [status, setStatus] = useState<RemittanceStatus | null>(null);
const { data, isLoading, isError, error, refetch } = useRemittances({
const { data, isLoading, isError, error, refetch, dataUpdatedAt } = useRemittances({
sort: "receivedDate",
order: "desc",
limit: PAGE_SIZE,
@@ -128,7 +128,7 @@ export function Remittances() {
</TableHeader>
<TableBody>
{items.map((r) => (
<TableRow key={r.id} className={cn("animate-row-flash")}>
<TableRow key={`${r.id}-${dataUpdatedAt}`} className={cn("animate-row-flash")}>
<TableCell className="display num text-[13px]">{r.id}</TableCell>
<TableCell className="display num text-[13px] text-muted-foreground">
{r.claimId}