fix(AnimatedSprite): Fix ESLint error by using ref for animate function

Author: PresentKim

src/components/AnimatedSprite.tsx

@@ -56,6 +56,7 @@ const AnimatedSprite = memo(function AnimatedSprite({
   const animationStateRef = useRef<AnimationState | null>(null)
   const animationFrameRef = useRef<number>(0)
   const lastTimeRef = useRef<number>(0)
+  const animateRef = useRef<((currentTime: number) => void) | null>(null)
 
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(false)
@@ -158,11 +159,18 @@ const AnimatedSprite = memo(function AnimatedSprite({
       drawFrame(ctx, imageRef.current, frameIndex)
 
       // Continue animation loop
-      animationFrameRef.current = requestAnimationFrame(animate)
+      if (animateRef.current) {
+        animationFrameRef.current = requestAnimationFrame(animateRef.current)
+      }
     },
     [paused, speed, drawFrame],
   )
 
+  // Store animate function in ref
+  useEffect(() => {
+    animateRef.current = animate
+  }, [animate])
+
   // Initialize animation
   const initAnimation = useCallback(
     async (image: HTMLImageElement) => {
@@ -225,9 +233,11 @@ const AnimatedSprite = memo(function AnimatedSprite({
 
       // Start animation
       lastTimeRef.current = 0
-      animationFrameRef.current = requestAnimationFrame(animate)
+      if (animateRef.current) {
+        animationFrameRef.current = requestAnimationFrame(animateRef.current)
+      }
     },
-    [mcmetaUrl, preloadedMcmetaData, animate],
+    [mcmetaUrl, preloadedMcmetaData],
   )
 
   // Load image
@@ -262,9 +272,9 @@ const AnimatedSprite = memo(function AnimatedSprite({
 
   // Handle pause/resume
   useEffect(() => {
-    if (!paused && animationStateRef.current) {
+    if (!paused && animationStateRef.current && animateRef.current) {
       lastTimeRef.current = 0
-      animationFrameRef.current = requestAnimationFrame(animate)
+      animationFrameRef.current = requestAnimationFrame(animateRef.current)
     } else if (paused && animationFrameRef.current) {
       cancelAnimationFrame(animationFrameRef.current)
     }
@@ -274,7 +284,7 @@ const AnimatedSprite = memo(function AnimatedSprite({
         cancelAnimationFrame(animationFrameRef.current)
       }
     }
-  }, [paused, animate])
+  }, [paused])
 
   if (error) {
     return (

src/components/ImageViewer.tsx

@@ -64,7 +64,6 @@ export function ImageViewer({
       const blob = await response.blob()
       saveAs(blob, fileName || 'image.png')
     } catch (err) {
-      // eslint-disable-next-line no-console
       console.error('Failed to download image', err)
     }
   }, [currentImage, fileName, repo])