Add reduce motion check on animated counts

changelog/7924-reduce-motion-animated-counts.yaml

@@ -0,0 +1,4 @@
+type: Changed
+description: Dashboard animated counts and chart animations now respect the "Reduce Motion" user preference.
+pr: 7924
+labels: []

clients/admin-ui/src/features/common/hooks/index.ts

@@ -1,6 +1,5 @@
 export * from "../pagination/usePagination";
 export * from "./useAPIHelper";
 export * from "./useConnectionLogo";
-export * from "./usePrefersReducedMotion";
 export * from "./useSearch";
 export * from "./useSorting";

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

@@ -1,3 +1,4 @@
+import { usePrefersReducedMotion } from "fidesui";
 import { useEffect, useRef, useState } from "react";
 
 function easeOut(t: number): number {
@@ -8,8 +9,13 @@ export const useCountUp = (target: number, duration = 800): number => {
   const [value, setValue] = useState(0);
   const rafRef = useRef<number | undefined>(undefined);
   const startRef = useRef<number | undefined>(undefined);
+  const reduceMotion = usePrefersReducedMotion();
 
   useEffect(() => {
+    if (reduceMotion) {
+      return setValue(target);
+    }
+
     if (target === 0) {
       setValue(0);
       return undefined;
@@ -37,7 +43,7 @@ export const useCountUp = (target: number, duration = 800): number => {
         cancelAnimationFrame(rafRef.current);
       }
     };
-  }, [target, duration]);
+  }, [reduceMotion, target, duration]);
 
   return value;
 };

clients/admin-ui/src/pages/login.tsx

@@ -9,6 +9,7 @@ import {
   Input,
   Typography,
   useMessage,
+  usePrefersReducedMotion,
 } from "fidesui";
 import { motion } from "motion/react";
 import type { NextPage } from "next";
@@ -27,7 +28,6 @@ import {
 } from "~/features/auth";
 import { passwordRules as strongPasswordRules } from "~/features/common/form/validation";
 import { getErrorMessage } from "~/features/common/helpers";
-import { usePrefersReducedMotion } from "~/features/common/hooks";
 import { RouterLink } from "~/features/common/nav/RouterLink";
 import { useGetAllOpenIDProvidersSimpleQuery } from "~/features/openid-authentication/openprovider.slice";
 import { RTKErrorResult } from "~/types/errors/api";

clients/fidesui/src/components/charts/chart-utils.ts

@@ -2,6 +2,7 @@ import { format, isValid } from "date-fns";
 import type { RefObject } from "react";
 import { useEffect, useState } from "react";
 
+import { usePrefersReducedMotion } from "../../hooks";
 import { MAX_INTERVAL_HOURS } from "./chart-constants";
 
 export const HOUR_MS = 3_600_000;
@@ -34,8 +35,11 @@ export const useContainerSize = (
 
 export const useChartAnimation = (animationDuration: number): boolean => {
   const [animationActive, setAnimationActive] = useState(true);
+  const reduceMotion = usePrefersReducedMotion();
+
   useEffect(() => {
-    if (animationDuration <= 0) {
+    if (reduceMotion || animationDuration <= 0) {
+      setAnimationActive(false);
       return undefined;
     }
     const startTime = performance.now();
@@ -49,8 +53,9 @@ export const useChartAnimation = (animationDuration: number): boolean => {
     };
     animationId = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(animationId);
-  }, [animationDuration]);
-  return animationActive;
+  }, [animationDuration, reduceMotion]);
+
+  return reduceMotion ? false : animationActive;
 };
 
 /** Format a timestamp for chart axes (verbose=false) or tooltips (verbose=true). */

clients/fidesui/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export type { UseFormModalOptions } from "./useFormModal";
 export { useFormModal } from "./useFormModal";
+export { usePrefersReducedMotion } from "./usePrefersReducedMotion";
 export type { ThemeMode, ThemeModeProviderProps } from "./useThemeMode";
 export { ThemeModeProvider, useThemeMode } from "./useThemeMode";

clients/fidesui/src/index.ts

@@ -451,4 +451,9 @@ export type {
   ThemeModeProviderProps,
   UseFormModalOptions,
 } from "./hooks";
-export { ThemeModeProvider, useFormModal, useThemeMode } from "./hooks";
+export {
+  ThemeModeProvider,
+  useFormModal,
+  usePrefersReducedMotion,
+  useThemeMode,
+} from "./hooks";