fix(motion): respect reduced motion in createMotionComponent() (#33357)

microsoft · Nov 27, 2024 · 883151b · 883151b
1 parent 5ada132
commit 883151b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/change/@fluentui-react-motion-80dc5fe2-1c39-41d8-921f-3e5d78554267.json b/change/@fluentui-react-motion-80dc5fe2-1c39-41d8-921f-3e5d78554267.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: respect reduced motion in createMotionComponent()",
+  "packageName": "@fluentui/react-motion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-motion/library/src/contexts/MotionBehaviourContext.ts b/packages/react-components/react-motion/library/src/contexts/MotionBehaviourContext.ts
@@ -6,5 +6,6 @@ import * as React from 'react';
 export type MotionBehaviourType = 'skip' | 'default';
 
 const MotionBehaviourContext = React.createContext<MotionBehaviourType | undefined>(undefined);
+
 export const MotionBehaviourProvider = MotionBehaviourContext.Provider;
 export const useMotionBehaviourContext = () => React.useContext(MotionBehaviourContext) ?? 'default';
diff --git a/packages/react-components/react-motion/library/src/hooks/useIsReducedMotion.ts b/packages/react-components/react-motion/library/src/hooks/useIsReducedMotion.ts
@@ -1,5 +1,6 @@
-import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from 'react';
 
 const REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';
 
@@ -12,7 +13,7 @@ export function useIsReducedMotion(): () => boolean {
   const queryValue = React.useRef<boolean>(false);
   const isEnabled = React.useCallback(() => queryValue.current, []);
 
-  React.useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {
       return;
     }