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