Fix animation race condition for dynamic fillValue updates

[Copilot]

Dynamic fillValue updates during an in-flight animation are dropped. The effect re-runs but exits early via animationRunning.current, and refs don't trigger rerenders when the animation completes.

Changes

Core fix:

• Replace boolean animationRunning ref with currentAnimation ref storing the animation object
• Cancel in-flight animations via .stop() when new fillValue arrives
• Start new animation immediately with latest value

Animation lifecycle:

• Callback clears reference only when currentAnimation.current === animation && finished
• Prevents stopped animations (finished: false) from clearing active animation
• Cleanup function stops animation if still current and clears reference

Dependencies:

• Remove arcAnimatedValue from dependency array (stable across renders)
• Keep lastFilledSegment.filled to trigger on value changes only

Tests:

• Add mock stop method to animation objects
• Verify stopped animation callbacks don't interfere with new animations
• Extract reusable animation mock helper

// Before: updates dropped during animation
useEffect(() => {
  if (animationRunning.current) return;  // Exits, never retries
  animationRunning.current = true;
  Animated.timing(...).start(() => animationRunning.current = false);
}, [lastFilledSegment.filled]);

// After: in-flight animations cancelled
useEffect(() => {
  if (currentAnimation.current) currentAnimation.current.stop();
  
  const animation = Animated.timing(...);
  currentAnimation.current = animation;
  animation.start(({ finished }) => {
    if (currentAnimation.current === animation && finished) {
      currentAnimation.current = null;
    }
  });
  
  return () => {
    if (currentAnimation.current === animation) {
      animation.stop();
      currentAnimation.current = null;
    }
  };
}, [lastFilledSegment.filled, animationDuration, animationDelay, isAnimated]);

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.