From 87cd51e1fc88fd95d2c69d6faa0dbf95c1a5f9c3 Mon Sep 17 00:00:00 2001
From: Tyler <tyler@crispygoat.com>
Date: Fri, 19 Jun 2026 20:00:05 -0600
Subject: [PATCH] fix(frontend): replay row-flash on every refetch via
 dataUpdatedAt key
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 README.md                   |  2 +-
 src/hooks/useClaims.ts      |  1 +
 src/hooks/useRemittances.ts |  1 +
 src/pages/Claims.tsx        | 10 +++++-----
 src/pages/Remittances.tsx   |  4 ++--
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index bc7e322..c8df6d2 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ cd backend && .venv/bin/pytest
 npm run typecheck
 npm run build
 
-# Frontend unit tests (when added)
+# Frontend unit tests
 npm test
 ```
 
diff --git a/src/hooks/useClaims.ts b/src/hooks/useClaims.ts
index 1ddeb25..03b7075 100644
--- a/src/hooks/useClaims.ts
+++ b/src/hooks/useClaims.ts
@@ -54,6 +54,7 @@ export function useClaims(params: ListClaimsParams) {
       isError: false,
       error: null,
       refetch: () => Promise.resolve(),
+      dataUpdatedAt: 0,
     } as const;
   }
   return q;
diff --git a/src/hooks/useRemittances.ts b/src/hooks/useRemittances.ts
index 84afd58..49256ac 100644
--- a/src/hooks/useRemittances.ts
+++ b/src/hooks/useRemittances.ts
@@ -37,6 +37,7 @@ export function useRemittances(params: ListRemittancesParams) {
       isError: false,
       error: null,
       refetch: () => Promise.resolve(),
+      dataUpdatedAt: 0,
     } as const;
   }
   return q;
diff --git a/src/pages/Claims.tsx b/src/pages/Claims.tsx
index 66bc550..0055406 100644
--- a/src/pages/Claims.tsx
+++ b/src/pages/Claims.tsx
@@ -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>
diff --git a/src/pages/Remittances.tsx b/src/pages/Remittances.tsx
index 38e4274..90ec8aa 100644
--- a/src/pages/Remittances.tsx
+++ b/src/pages/Remittances.tsx
@@ -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}