From 612551f26302467b2e301f8d6b4d5509f3663c66 Mon Sep 17 00:00:00 2001 From: Lukasz Modzelewski Date: Tue, 2 Sep 2025 16:14:49 +0200 Subject: [PATCH 1/4] Remove unused DesktopBackgroundImage from index.ios.tsx --- .../SignInPageLayout/BackgroundImage/index.ios.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx index fc28dc08fb15..3cb1b09e5c74 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx +++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx @@ -1,9 +1,8 @@ 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 useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -12,10 +11,9 @@ 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 ( setOpacityAnimation()} style={[styles.signInBackground, StyleUtils.getWidthStyle(width)]} transition={transitionDuration} From f0187baf5cfe4a597e75bbfc75faa1199e5d5a9f Mon Sep 17 00:00:00 2001 From: Lukasz Modzelewski Date: Tue, 2 Sep 2025 16:15:48 +0200 Subject: [PATCH 2/4] Lazy load home-background on web/desktop --- .../BackgroundImage/index.tsx | 42 ++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx index 46acaf5061a4..cdf0e0042e34 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx +++ b/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,18 @@ function BackgroundImage({width, transitionDuration, isSmallScreen = false}: Bac return; } - if (isSmallScreen) { - return ( + return ( + - - ); - } - - return ( - - - + ); } From ba7f44413c9a7e075e06fbd92356a3e99aab0269 Mon Sep 17 00:00:00 2001 From: Lukasz Modzelewski Date: Wed, 3 Sep 2025 10:40:38 +0200 Subject: [PATCH 3/4] Rename home-background--mobile-new suffix to -ios --- ...home-background--mobile-new.svg => home-background--ios.svg} | 0 src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename assets/images/{home-background--mobile-new.svg => home-background--ios.svg} (100%) diff --git a/assets/images/home-background--mobile-new.svg b/assets/images/home-background--ios.svg similarity index 100% rename from assets/images/home-background--mobile-new.svg rename to assets/images/home-background--ios.svg diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx index 3cb1b09e5c74..86ccdfd74ff5 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx +++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx @@ -3,7 +3,7 @@ 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 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'; From 6290b58d608f08d9e91a12e89b570c89ee348a6e Mon Sep 17 00:00:00 2001 From: Lukasz Modzelewski Date: Mon, 8 Sep 2025 14:26:42 +0200 Subject: [PATCH 4/4] Remove unused BackgroundComponent style --- src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx index cdf0e0042e34..35de4837654e 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx +++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx @@ -53,10 +53,7 @@ function BackgroundImage({width, transitionDuration, isSmallScreen = false}: Bac style={styles.signInBackground} entering={FadeIn.duration(transitionDuration)} > - + );