Merge pull request Expensify#86226 from software-mansion-labs/war-in/improve-bootsplash-performance

performance: Always mount `SplashScreenHider` and control hide timing via prop instead of conditional rendering

Author: Julesssss

src/Expensify.tsx

@@ -181,7 +181,9 @@ function Expensify() {
         Navigation.setIsNavigationReady();
     }, []);
 
+    const [splashHideHasBeenCalled, setSplashHideHasBeenCalled] = useState(false);
     const onSplashHide = useCallback(() => {
+        setSplashHideHasBeenCalled(true);
         setSplashScreenState(CONST.BOOT_SPLASH_STATE.HIDDEN);
         endSpan(CONST.TELEMETRY.SPAN_OD_ND_TRANSITION);
         endSpan(CONST.TELEMETRY.SPAN_APP_STARTUP);
@@ -285,7 +287,12 @@ function Expensify() {
                     initialUrl={initialUrl}
                 />
             )}
-            {shouldHideSplash && <SplashScreenHider onHide={onSplashHide} />}
+            {!splashHideHasBeenCalled && (
+                <SplashScreenHider
+                    shouldHideSplash={shouldHideSplash}
+                    onHide={onSplashHide}
+                />
+            )}
         </>
     );
 }

src/components/SplashScreenHider/index.native.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useRef} from 'react';
+import {useEffect, useEffectEvent, useRef} from 'react';
 import type {ViewStyle} from 'react-native';
 import {StyleSheet} from 'react-native';
 import Reanimated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
@@ -9,7 +9,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import BootSplash from '@libs/BootSplash';
 import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types';
 
-function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType {
+function SplashScreenHider({shouldHideSplash, onHide}: SplashScreenHiderProps): SplashScreenHiderReturnType {
     const styles = useThemeStyles();
     const logoSizeRatio = BootSplash.logoSizeRatio || 1;
 
@@ -24,8 +24,7 @@ function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashS
     }));
 
     const hideHasBeenCalled = useRef(false);
-
-    const hide = useCallback(() => {
+    const hide = useEffectEvent(() => {
         // hide can only be called once
         if (hideHasBeenCalled.current) {
             return;
@@ -52,13 +51,19 @@ function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashS
                 ),
             );
         });
-    }, [opacity, scale, onHide]);
+    });
+
+    useEffect(() => {
+        if (!shouldHideSplash) {
+            return;
+        }
+        hide();
+    }, [shouldHideSplash]);
 
     return (
         <Reanimated.View style={[StyleSheet.absoluteFill, styles.splashScreenHider, opacityStyle]}>
             <Reanimated.View style={scaleStyle}>
                 <ImageSVG
-                    onLoadEnd={hide}
                     contentFit="fill"
                     style={{width: 100 * logoSizeRatio, height: 100 * logoSizeRatio}}
                     src={Logo}

src/components/SplashScreenHider/index.tsx

@@ -1,11 +1,17 @@
-import {useEffect} from 'react';
+import {useEffect, useEffectEvent} from 'react';
 import BootSplash from '@libs/BootSplash';
 import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types';
 
-function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType {
-    useEffect(() => {
+function SplashScreenHider({shouldHideSplash, onHide}: SplashScreenHiderProps): SplashScreenHiderReturnType {
+    const hide = useEffectEvent(() => {
         BootSplash.hide().then(() => onHide());
-    }, [onHide]);
+    });
+    useEffect(() => {
+        if (!shouldHideSplash) {
+            return;
+        }
+        hide();
+    }, [shouldHideSplash]);
 
     return null;
 }

src/components/SplashScreenHider/types.ts

@@ -1,6 +1,9 @@
 import type {ReactNode} from 'react';
 
 type SplashScreenHiderProps = {
+    /** Whether the splash screen should be hidden */
+    shouldHideSplash: boolean;
+
     /** Splash screen has been hidden */
     onHide: () => void;
 };