Remove react-motion library (#34293)

app/javascript/mastodon/components/animated_number.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { TransitionMotion, spring } from 'react-motion';
+import { animated, useSpring, config } from '@react-spring/web';
 
 import { reduceMotion } from '../initial_state';
 
@@ -11,53 +11,49 @@ interface Props {
 }
 export const AnimatedNumber: React.FC<Props> = ({ value }) => {
   const [previousValue, setPreviousValue] = useState(value);
-  const [direction, setDirection] = useState<1 | -1>(1);
+  const direction = value > previousValue ? -1 : 1;
 
-  if (previousValue !== value) {
-    setPreviousValue(value);
-    setDirection(value > previousValue ? 1 : -1);
-  }
-
-  const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]);
-  const willLeave = useCallback(
-    () => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }),
-    [direction],
+  const [styles, api] = useSpring(
+    () => ({
+      from: { transform: `translateY(${100 * direction}%)` },
+      to: { transform: 'translateY(0%)' },
+      onRest() {
+        setPreviousValue(value);
+      },
+      config: { ...config.gentle, duration: 200 },
+      immediate: true, // This ensures that the animation is not played when the component is first rendered
+    }),
+    [value, previousValue],
   );
 
+  // When the value changes, start the animation
+  useEffect(() => {
+    if (value !== previousValue) {
+      void api.start({ reset: true });
+    }
+  }, [api, previousValue, value]);
+
   if (reduceMotion) {
     return <ShortNumber value={value} />;
   }
 
-  const styles = [
-    {
-      key: `${value}`,
-      data: value,
-      style: { y: spring(0, { damping: 35, stiffness: 400 }) },
-    },
-  ];
-
   return (
-    <TransitionMotion
-      styles={styles}
-      willEnter={willEnter}
-      willLeave={willLeave}
-    >
-      {(items) => (
-        <span className='animated-number'>
-          {items.map(({ key, data, style }) => (
-            <span
-              key={key}
-              style={{
-                position:
-                  direction * (style.y ?? 0) > 0 ? 'absolute' : 'static',
-                transform: `translateY(${(style.y ?? 0) * 100}%)`,
-              }}
-            >
-              <ShortNumber value={data as number} />
-            </span>
-          ))}
-        </span>
+    <span className='animated-number'>
+      <animated.span style={styles}>
+        <ShortNumber value={value} />
+      </animated.span>
+      {value !== previousValue && (
+        <animated.span
+          style={{
+            ...styles,
+            position: 'absolute',
+            top: `${-100 * direction}%`, // Adds extra space on top of translateY
+          }}
+          role='presentation'
+        >
+          <ShortNumber value={previousValue} />
+        </animated.span>
       )}
-    </TransitionMotion>
+    </span>
   );
 };