Rectify the background delay issue by incorporating a transition

src/CONST.ts

@@ -46,6 +46,7 @@ const CONST = {
         IN: 'in',
         OUT: 'out',
     },
+    BACKGROUND_IMAGE_TRANSITION_DURATION: 1000,
     ARROW_HIDE_DELAY: 3000,
 
     API_ATTACHMENT_VALIDATIONS: {

src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js

@@ -11,6 +11,7 @@ function BackgroundImage(props) {
             source={AndroidBackgroundImage}
             pointerEvents={props.pointerEvents}
             style={[styles.signInBackground, {width: props.width}]}
+            transition={props.transitionDuration}
         />
     );
 }

src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js

@@ -21,11 +21,11 @@ function BackgroundImage(props) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const src = useMemo(() => (props.isSmallScreen ? MobileBackgroundImage : DesktopBackgroundImage), [props.isSmallScreen]);
-
     return (
         <Image
             source={src}
             style={[styles.signInBackground, StyleUtils.getWidthStyle(props.width)]}
+            transition={props.transitionDuration}
         />
     );
 }

src/pages/signin/SignInPageLayout/BackgroundImage/index.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import * as Animatable from 'react-native-animatable';
 import DesktopBackgroundImage from '@assets/images/home-background--desktop.svg';
 import MobileBackgroundImage from '@assets/images/home-background--mobile.svg';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -17,16 +18,33 @@ const propTypes = {
 };
 function BackgroundImage(props) {
     const styles = useThemeStyles();
-    return props.isSmallScreen ? (
-        <MobileBackgroundImage
-            width={props.width}
-            style={styles.signInBackground}
-        />
-    ) : (
-        <DesktopBackgroundImage
-            width={props.width}
+    const fadeIn = {
+        from: {
+            opacity: 0,
+        },
+        to: {
+            opacity: 1,
+        },
+    };
+
+    return (
+        <Animatable.View
             style={styles.signInBackground}
-        />
+            animation={fadeIn}
+            duration={props.transitionDuration}
+        >
+            {props.isSmallScreen ? (
+                <MobileBackgroundImage
+                    width={props.width}
+                    style={styles.signInBackground}
+                />
+            ) : (
+                <DesktopBackgroundImage
+                    width={props.width}
+                    style={styles.signInBackground}
+                />
+            )}
+        </Animatable.View>
     );
 }
 

src/pages/signin/SignInPageLayout/BackgroundImage/propTypes.js

@@ -6,6 +6,9 @@ const propTypes = {
 
     /** The width of the image. */
     width: PropTypes.number.isRequired,
+
+    /** Transition duration in milliseconds */
+    transitionDuration: PropTypes.number,
 };
 
 export default propTypes;

src/pages/signin/SignInPageLayout/index.js

@@ -13,6 +13,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInPageHero from '@pages/signin/SignInPageHero';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import BackgroundImage from './BackgroundImage';
 import Footer from './Footer';
 import SignInPageContent from './SignInPageContent';
@@ -127,6 +128,7 @@ function SignInPageLayout(props) {
                                     isSmallScreen={false}
                                     pointerEvents="none"
                                     width={variables.signInHeroBackgroundWidth}
+                                    transitionDuration={CONST.BACKGROUND_IMAGE_TRANSITION_DURATION}
                                 />
                             </View>
                             <View>
@@ -166,6 +168,7 @@ function SignInPageLayout(props) {
                             isSmallScreen
                             pointerEvents="none"
                             width={variables.signInHeroBackgroundWidthMobile}
+                            transitionDuration={CONST.BACKGROUND_IMAGE_TRANSITION_DURATION}
                         />
                         <SignInPageContent
                             welcomeHeader={props.welcomeHeader}