From ae4bba0357e78420cc51aafb395c893331b76228 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luis=20Tani=C3=A7a?= <matallui@gmail.com>
Date: Thu, 20 Nov 2025 16:51:43 -0700
Subject: [PATCH] fix(predict): fade in gtm modal after image loads

---
 .../PredictGTMModal/PredictGTMModal.tsx       | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx b/app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx
index ffc785b297a0..5b5861e72271 100644
--- a/app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx
+++ b/app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx
@@ -1,6 +1,11 @@
 import { useNavigation } from '@react-navigation/native';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Image, View } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { strings } from '../../../../../../locales/i18n';
 import ButtonBase from '../../../../../component-library/components/Buttons/Button/foundation/ButtonBase';
@@ -33,12 +38,25 @@ const PredictGTMModal = () => {
   const { trackEvent, createEventBuilder } = useMetrics();
   const { navigate } = useNavigation();
   const theme = useTheme();
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const opacity = useSharedValue(0);
 
   const titleText = strings('predict.gtm_content.title');
   const subtitleText = strings('predict.gtm_content.title_description');
 
   const styles = createStyles(theme);
 
+  // Animate content fade-in when image loads
+  useEffect(() => {
+    if (imageLoaded) {
+      opacity.value = withTiming(1, { duration: 500 });
+    }
+  }, [imageLoaded, opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
   const handleClose = async () => {
     await StorageWrapper.setItem(PREDICT_GTM_MODAL_SHOWN, 'true');
 
@@ -81,9 +99,16 @@ const PredictGTMModal = () => {
   };
 
   return (
-    <View style={styles.pageContainer} testID="predict-gtm-modal-container">
+    <Animated.View
+      style={[styles.pageContainer, animatedStyle]}
+      testID="predict-gtm-modal-container"
+    >
       {/* Background Image - Full Screen */}
-      <Image source={PredictMarketingImage} style={styles.backgroundImage} />
+      <Image
+        source={PredictMarketingImage}
+        style={styles.backgroundImage}
+        onLoad={() => setImageLoaded(true)}
+      />
 
       {/* Content Overlay */}
       <SafeAreaView style={styles.contentContainer}>
@@ -142,7 +167,7 @@ const PredictGTMModal = () => {
           />
         </View>
       </SafeAreaView>
-    </View>
+    </Animated.View>
   );
 };