[charts] Fix LineChart transition stopping before completion (#14366)

Author: JCQuintas

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

@@ -107,7 +107,7 @@ function MarkElement(props: MarkElementProps) {
   });
   const { axis } = React.useContext(InteractionContext);
 
-  const position = useSpring({ x, y, immediate: skipAnimation });
+  const position = useSpring({ to: { x, y }, immediate: skipAnimation });
   const ownerState = {
     id,
     classes: innerClasses,

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

@@ -1,29 +1,42 @@
 import * as React from 'react';
 import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
-import { useSpring, to } from '@react-spring/web';
+import { useSpring } from '@react-spring/web';
 
 function usePrevious<T>(value: T) {
-  const ref = React.useRef<T | null>(null);
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
+  const ref = React.useRef<{ currentPath: T; previousPath?: T }>({
+    currentPath: value,
+    previousPath: undefined,
+  });
+  if (ref.current.currentPath !== value) {
+    ref.current = {
+      currentPath: value,
+      previousPath: ref.current.currentPath,
+    };
+  }
+
   return ref.current;
 }
 
-// Taken from Nivo
 export const useAnimatedPath = (path: string, skipAnimation?: boolean) => {
-  const previousPath = usePrevious(path);
+  const memoryRef = usePrevious(path);
+
   const interpolator = React.useMemo(
-    () => (previousPath ? interpolateString(previousPath, path) : () => path),
-    [previousPath, path],
+    () =>
+      memoryRef.previousPath
+        ? interpolateString(memoryRef.previousPath, memoryRef.currentPath)
+        : () => memoryRef.currentPath,
+    [memoryRef.currentPath, memoryRef.previousPath],
   );
 
-  const { value } = useSpring({
-    from: { value: 0 },
-    to: { value: 1 },
-    reset: true,
-    immediate: skipAnimation,
-  });
+  const [{ value }] = useSpring(
+    {
+      from: { value: 0 },
+      to: { value: 1 },
+      reset: true,
+      immediate: skipAnimation,
+    },
+    [memoryRef.currentPath],
+  );
 
-  return to([value], interpolator);
+  return value.to(interpolator);
 };