fix(theme): correctly disable animations on mount (#2021)

twilio-labs · Nov 10, 2021 · 8bedb9f · 8bedb9f
1 parent cbdb3cb
commit 8bedb9f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/stupid-buttons-teach.md b/.changeset/stupid-buttons-teach.md
@@ -0,0 +1,7 @@
+---
+'@twilio-paste/customization': patch
+'@twilio-paste/theme': patch
+'@twilio-paste/core': patch
+---
+
+[Theme and Customization] Slight tweak to prevent animations from running once on app load when they should be disabled from the beginning.
diff --git a/packages/paste-customization/src/CustomizationProvider.tsx b/packages/paste-customization/src/CustomizationProvider.tsx
@@ -41,11 +41,11 @@ const CustomizationProvider: React.FC<CustomizationProviderProps> = ({
   );
 
   const prefersReducedMotion = useReducedMotion();
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     AnimatedGlobals.assign({
       skipAnimation: disableAnimations || prefersReducedMotion,
     });
-  }, [prefersReducedMotion]);
+  }, [disableAnimations, prefersReducedMotion]);
 
   return (
     <StyledThemeProvider theme={customTheme}>

diff --git a/packages/paste-theme/src/themeProvider.tsx b/packages/paste-theme/src/themeProvider.tsx
@@ -50,11 +50,11 @@ const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({
   ...props
 }) => {
   const prefersReducedMotion = useReducedMotion();
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     AnimatedGlobals.assign({
       skipAnimation: disableAnimations || prefersReducedMotion,
     });
-  }, [prefersReducedMotion]);
+  }, [disableAnimations, prefersReducedMotion]);
 
   const providerThemeProps = getProviderThemeProps(theme, customBreakpoints);