Add reduce motion check on animated counts

[gilluminate]

simply adds a check for whether the user prefers reduced motion when doing the animated counts on the dashboard.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	Apr 16, 2026 7:42pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Apr 16, 2026 7:42pm

[claude]

Code Review — Add reduce motion check on animated counts

The change is small, focused, and directionally correct — respecting prefers-reduced-motion is a meaningful accessibility improvement. The logic is sound: reduceMotion is properly added to the dependency array, which means the effect re-runs correctly if the user changes their OS preference at runtime (since usePrefersReducedMotion subscribes to MediaQueryList.change events).

Must Fix

return setValue(target) pattern (see inline comment on line 15)

The return setValue(target) pattern is misleading. React state setters return void, so this is equivalent to return undefined. In a useEffect callback, returning something implies a cleanup function — this looks like it's returning one but isn't. Should be:

setValue(target);
return;

Suggestions

No test coverage for the new branch

There's no test file for useCountUp. The new reduceMotion path is the most important case to guard against regression — specifically that setValue(target) fires immediately and no requestAnimationFrame is scheduled. A renderHook test mocking window.matchMedia to return matches: true would cover this clearly.

First-render flash (pre-existing, but worth noting while touching the hook)

usePrefersReducedMotion initializes to false before the useEffect fires. On the first render, reduceMotion is always false, so the animation ticks for at least one frame before the hook snaps to the final value for users with reduced motion enabled. A common fix is to initialize synchronously if window is available:

const [prefersReducedMotion, setPrefersReducedMotion] = useState(
  () => typeof window !== "undefined"
    ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
    : false
);

This is pre-existing behavior in usePrefersReducedMotion, not introduced by this PR — flagging it as an informational note since the hook is being touched anyway.

---

🔬 Codegraph: connected (46711 nodes)

---

💡 Write /code-review in a comment to re-run this review.

[claude]

clients/admin-ui/src/home/useCountUp.ts:15

return setValue(target) is misleading here. setValue is a React state setter that returns void. In a useEffect callback, the only meaningful return value is a cleanup function — returning the result of a side-effect call looks like it's returning a cleanup, but it's actually returning undefined.

Use the idiomatic form instead:

if (reduceMotion) {
  setValue(target);
  return;
}

This makes the intent explicit: set state, then exit early.

[github-actions]

Title	Lines	Statements	Branches	Functions
admin-ui		6.18% (2709/43817)	5.38% (1340/24866)	4.24% (550/12959)
fides-js		78.98% (1962/2484)	65.55% (1214/1852)	72.57% (336/463)
privacy-center		85.97% (331/385)	81.36% (179/220)	78.87% (56/71)

[kruulik]

@gilluminate Could you add this to the useChartAnimation in clients/fidesui/src/components/charts/chart-utils.ts?

With prefers-reduced-motion: reduce active, the hook should return false, disabling animations across all 6 Recharts chart components.

[gilluminate]

@gilluminate Could you add this to the useChartAnimation in clients/fidesui/src/components/charts/chart-utils.ts?

Done!

[kruulik]

Very nice!