Fixed rare case of infinitive animation of animated image (#3332)

* Fixed rare case of infinitive animation of animated image * Fixed tests
wix · Oct 30, 2024 · ed8d3cf · ed8d3cf
1 parent 59b71f6
commit ed8d3cf
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap b/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap
@@ -1450,6 +1450,7 @@ exports[`AvatarScreen renders screen 1`] = `
             assetGroup="icons"
             onError={[Function]}
             onLoad={[Function]}
+            onLoadStart={[Function]}
             source={
               {
                 "uri": "https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg",

diff --git a/src/components/animatedImage/index.tsx b/src/components/animatedImage/index.tsx
@@ -36,12 +36,13 @@ const AnimatedImage = (props: AnimatedImageProps) => {
     loader,
     style,
     onLoad: propsOnLoad,
+    onLoadStart: propsOnLoadStart,
     animationDuration = 300,
     testID,
     ...others
   } = props;
 
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
   const opacity = useSharedValue(0);
 
   useDidUpdate(() => {
@@ -50,16 +51,23 @@ const AnimatedImage = (props: AnimatedImageProps) => {
     }
   }, [loader]);
 
-  const onLoad = useCallback((event: NativeSyntheticEvent<ImageLoadEventData>) => {
-    setIsLoading(false);
-    propsOnLoad?.(event);
-    // did not start the animation already
-    if (opacity.value === 0) {
-      opacity.value = withTiming(1, {duration: animationDuration});
-    }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [setIsLoading, propsOnLoad, animationDuration]);
+  const onLoad = useCallback(
+    (event: NativeSyntheticEvent<ImageLoadEventData>) => {
+      setIsLoading(false);
+      propsOnLoad?.(event);
+      // did not start the animation already
+      if (opacity.value === 0) {
+        opacity.value = withTiming(1, {duration: animationDuration});
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setIsLoading, propsOnLoad, animationDuration]
+  );
+
+  const onLoadStart = useCallback(() => {
+    setIsLoading(true);
+    propsOnLoadStart?.();
+  }, [setIsLoading, propsOnLoadStart, animationDuration]);
 
   const fadeInStyle = useAnimatedStyle(() => {
     return {opacity: opacity.value};
@@ -75,6 +83,7 @@ const AnimatedImage = (props: AnimatedImageProps) => {
         style={_style}
         source={source}
         onLoad={onLoad}
+        onLoadStart={onLoadStart}
         testID={testID}
         imageStyle={undefined}
       />