Merge pull request #45211 from ShridharGoel/44860

Fix page stability issue on animation load

src/components/Lottie/index.tsx

@@ -1,7 +1,7 @@
-import type {LottieViewProps} from 'lottie-react-native';
+import type {AnimationObject, LottieViewProps} from 'lottie-react-native';
 import LottieView from 'lottie-react-native';
 import type {ForwardedRef} from 'react';
-import React, {forwardRef} from 'react';
+import React, {forwardRef, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import type DotLottieAnimation from '@components/LottieAnimations/types';
 import useAppState from '@hooks/useAppState';
@@ -19,6 +19,12 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef<LottieVie
 
     useNetwork({onReconnect: () => setIsError(false)});
 
+    const [animationFile, setAnimationFile] = useState<string | AnimationObject | {uri: string}>();
+
+    useEffect(() => {
+        setAnimationFile(source.file);
+    }, [setAnimationFile, source.file]);
+
     const aspectRatioStyle = styles.aspectRatioLottie(source);
 
     // If the image fails to load or app is in background state, we'll just render an empty view
@@ -28,17 +34,17 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef<LottieVie
         return <View style={[aspectRatioStyle, props.style]} />;
     }
 
-    return (
+    return animationFile ? (
         <LottieView
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            source={source.file}
+            source={animationFile}
             ref={ref}
             style={[aspectRatioStyle, props.style]}
             webStyle={{...aspectRatioStyle, ...webStyle}}
             onAnimationFailure={() => setIsError(true)}
         />
-    );
+    ) : null;
 }
 
 Lottie.displayName = 'Lottie';