[charts] Fix LineChart not properly animating when hydrating

packages/x-charts/src/LineChart/AnimatedArea.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { animated, useSpring } from '@react-spring/web';
+import { animated, useTransition } from '@react-spring/web';
 import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
 import { cleanId } from '../internals/cleanId';
@@ -49,9 +49,11 @@ function AnimatedArea(props: AnimatedAreaProps) {
 
   const path = useAnimatedPath(d, skipAnimation);
 
-  const { animatedWidth } = useSpring({
+  const transitions = useTransition([1], {
     from: { animatedWidth: left },
     to: { animatedWidth: width + left + right },
+    enter: { animatedWidth: width + left + right },
+    leave: { animatedWidth: left },
     reset: false,
     immediate: skipAnimation,
   });
@@ -60,7 +62,9 @@ function AnimatedArea(props: AnimatedAreaProps) {
   return (
     <React.Fragment>
       <clipPath id={clipId}>
-        <animated.rect x={0} y={0} width={animatedWidth} height={top + height + bottom} />
+        {transitions((style) => (
+          <animated.rect x={0} y={0} width={style.animatedWidth} height={top + height + bottom} />
+        ))}
       </clipPath>
       <g clipPath={`url(#${clipId})`}>
         <AreaElementPath {...other} ownerState={ownerState} d={path} />

packages/x-charts/src/LineChart/AnimatedLine.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { animated, useSpring } from '@react-spring/web';
+import { animated, useTransition } from '@react-spring/web';
 import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
 import { styled } from '@mui/material/styles';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
@@ -52,9 +52,11 @@ function AnimatedLine(props: AnimatedLineProps) {
 
   const path = useAnimatedPath(d, skipAnimation);
 
-  const { animatedWidth } = useSpring({
+  const transitions = useTransition([1], {
     from: { animatedWidth: left },
     to: { animatedWidth: width + left + right },
+    enter: { animatedWidth: width + left + right },
+    leave: { animatedWidth: left },
     reset: false,
     immediate: skipAnimation,
   });
@@ -63,7 +65,9 @@ function AnimatedLine(props: AnimatedLineProps) {
   return (
     <React.Fragment>
       <clipPath id={clipId}>
-        <animated.rect x={0} y={0} width={animatedWidth} height={top + height + bottom} />
+        {transitions((style) => (
+          <animated.rect x={0} y={0} width={style.animatedWidth} height={top + height + bottom} />
+        ))}
       </clipPath>
       <g clipPath={`url(#${clipId})`}>
         <LineElementPath {...other} ownerState={ownerState} d={path} />

packages/x-charts/src/hooks/useReducedMotion.ts

@@ -1,5 +1,12 @@
 import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
 
+const handleMediaChange = (e: { matches: boolean | undefined }) => {
+  Globals.assign({
+    // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
+    skipAnimation: e.matches || undefined,
+  });
+};
+
 /**
  * Returns `boolean` or `null`, used to automatically
  * set skipAnimations to the value of the user's
@@ -8,24 +15,18 @@ import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
  * The return value, post-effect, is the value of their preferred setting
  */
 export const useReducedMotion = () => {
-  // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
+  // Taken from: https://github.com/pmndrs/react-spring/blob/fd65b605b85c3a24143c4ce9dd322fdfca9c66be/packages/shared/src/hooks/useReducedMotion.ts
 
   useIsomorphicLayoutEffect(() => {
-    if (!window.matchMedia) {
-      // skip animation in environments where `window.matchMedia` would not be available (i.e. test/jsdom)
-      Globals.assign({
-        skipAnimation: true,
-      });
-      return () => {};
+    // Skip animation test/jsdom
+    const shouldSkipAnimation = !window?.matchMedia;
+
+    if (shouldSkipAnimation) {
+      handleMediaChange({ matches: true });
+      return undefined;
     }
-    const mql = window.matchMedia('(prefers-reduced-motion)');
 
-    const handleMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
-      Globals.assign({
-        // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
-        skipAnimation: event.matches || undefined,
-      });
-    };
+    const mql = window.matchMedia('(prefers-reduced-motion)');
 
     handleMediaChange(mql);