[charts] Fix line animation

packages/x-charts/src/internals/useAnimatedPath.ts

@@ -1,29 +1,40 @@
 import * as React from 'react';
 import { interpolateString } from 'd3-interpolate';
-import { useSpring, to } from '@react-spring/web';
-
-function usePrevious<T>(value: T) {
-  const ref = React.useRef<T | null>(null);
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
+import { useSpringRef, useSpring, to } from '@react-spring/web';
 
 // Taken from Nivo
 export const useAnimatedPath = (path: string, skipAnimation?: boolean) => {
-  const previousPath = usePrevious(path);
-  const interpolator = React.useMemo(
-    () => (previousPath ? interpolateString(previousPath, path) : () => path),
-    [previousPath, path],
-  );
+  const previousPathRef = React.useRef<string | null>(null);
+  const currentPathRef = React.useRef<string | null>(path);
+
+  const api = useSpringRef();
+
+  React.useEffect(() => {
+    if (previousPathRef.current !== path) {
+      // Only start the animation if the previouse path is different.
+      // Avoid re-animating if the props is updated with the same value.u
+      api.start();
+    }
+    if (currentPathRef.current !== path) {
+      previousPathRef.current = currentPathRef.current;
+      currentPathRef.current = path;
+    }
+  }, [api, path]);
 
   const { value } = useSpring({
+    ref: api,
     from: { value: 0 },
     to: { value: 1 },
     reset: true,
     immediate: skipAnimation,
   });
 
-  return to([value], interpolator);
+  const interpolation = (t: number) => {
+    if (previousPathRef.current === null) {
+      return path;
+    }
+    return interpolateString(previousPathRef.current, path)(t);
+  };
+
+  return to([value], interpolation);
 };