perf: lazy load signIn home-background assets

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

@@ -1,21 +1,19 @@
 import {Image} from 'expo-image';
-import React, {useEffect, useMemo, useState} from 'react';
-import {InteractionManager} from 'react-native';
+import React, {useEffect, useState} from 'react';
 import type {ImageSourcePropType} from 'react-native';
+import {InteractionManager} from 'react-native';
 import Reanimated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
-import DesktopBackgroundImage from '@assets/images/home-background--desktop.svg';
-import MobileBackgroundImage from '@assets/images/home-background--mobile-new.svg';
+import MobileBackgroundImage from '@assets/images/home-background--ios.svg';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isAnonymousUser} from '@libs/actions/Session';
 import CONST from '@src/CONST';
 import {useSplashScreenStateContext} from '@src/SplashScreenStateContext';
 import type BackgroundImageProps from './types';
 
-function BackgroundImage({width, transitionDuration, isSmallScreen = false}: BackgroundImageProps) {
+function BackgroundImage({width, transitionDuration}: BackgroundImageProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const src = useMemo(() => (isSmallScreen ? MobileBackgroundImage : DesktopBackgroundImage), [isSmallScreen]);
     const [isInteractionComplete, setIsInteractionComplete] = useState(false);
     const isAnonymous = isAnonymousUser();
 
@@ -56,7 +54,7 @@ function BackgroundImage({width, transitionDuration, isSmallScreen = false}: Bac
     return (
         <Reanimated.View style={[styles.signInBackground, StyleUtils.getWidthStyle(width), animatedStyle]}>
             <Image
-                source={src as ImageSourcePropType}
+                source={MobileBackgroundImage as ImageSourcePropType}
                 onLoadEnd={() => setOpacityAnimation()}
                 style={[styles.signInBackground, StyleUtils.getWidthStyle(width)]}
                 transition={transitionDuration}

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

@@ -1,17 +1,33 @@
-import React, {useEffect, useState} from 'react';
+import React, {lazy, Suspense, useEffect, useMemo, useState} from 'react';
 import {InteractionManager} from 'react-native';
 import Animated, {FadeIn} from 'react-native-reanimated';
-import DesktopBackgroundImage from '@assets/images/home-background--desktop.svg';
-import MobileBackgroundImage from '@assets/images/home-background--mobile.svg';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isAnonymousUser} from '@libs/actions/Session';
 import type BackgroundImageProps from './types';
 
+const BackgroundMobile = lazy(() =>
+    import('@assets/images/home-background--mobile.svg').catch(() => ({
+        default: () => null,
+    })),
+);
+const BackgroundDesktop = lazy(() =>
+    import('@assets/images/home-background--desktop.svg').catch(() => ({
+        default: () => null,
+    })),
+);
+
 function BackgroundImage({width, transitionDuration, isSmallScreen = false}: BackgroundImageProps) {
     const styles = useThemeStyles();
     const [isInteractionComplete, setIsInteractionComplete] = useState(false);
     const isAnonymous = isAnonymousUser();
 
+    const BackgroundComponent = useMemo(() => {
+        if (isSmallScreen) {
+            return BackgroundMobile;
+        }
+        return BackgroundDesktop;
+    }, [isSmallScreen]);
+
     useEffect(() => {
         if (!isAnonymous) {
             return;
@@ -31,30 +47,15 @@ function BackgroundImage({width, transitionDuration, isSmallScreen = false}: Bac
         return;
     }
 
-    if (isSmallScreen) {
-        return (
+    return (
+        <Suspense fallback={null}>
             <Animated.View
                 style={styles.signInBackground}
                 entering={FadeIn.duration(transitionDuration)}
             >
-                <MobileBackgroundImage
-                    width={width}
-                    style={styles.signInBackground}
-                />
+                <BackgroundComponent width={width} />
             </Animated.View>
-        );
-    }
-
-    return (
-        <Animated.View
-            style={styles.signInBackground}
-            entering={FadeIn.duration(transitionDuration)}
-        >
-            <DesktopBackgroundImage
-                width={width}
-                style={styles.signInBackground}
-            />
-        </Animated.View>
+        </Suspense>
     );
 }