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

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

(cherry picked from commit 9bed498)

(cherry-picked to staging by jasperhuangg)

Author: Julesssss

src/Expensify.tsx

@@ -199,9 +199,7 @@ 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);
@@ -294,12 +292,7 @@ function Expensify() {
                     initialUrl={initialUrl}
                 />
             )}
-            {!splashHideHasBeenCalled && (
-                <SplashScreenHider
-                    shouldHideSplash={shouldHideSplash}
-                    onHide={onSplashHide}
-                />
-            )}
+            {shouldHideSplash && <SplashScreenHider onHide={onSplashHide} />}
         </>
     );
 }

src/components/SplashScreenHider/index.native.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useEffectEvent, useRef} from 'react';
+import {useCallback, 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({shouldHideSplash, onHide}: SplashScreenHiderProps): SplashScreenHiderReturnType {
+function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType {
     const styles = useThemeStyles();
     const logoSizeRatio = BootSplash.logoSizeRatio || 1;
 
@@ -24,7 +24,8 @@ function SplashScreenHider({shouldHideSplash, onHide}: SplashScreenHiderProps):
     }));
 
     const hideHasBeenCalled = useRef(false);
-    const hide = useEffectEvent(() => {
+
+    const hide = useCallback(() => {
         // hide can only be called once
         if (hideHasBeenCalled.current) {
             return;
@@ -51,19 +52,13 @@ function SplashScreenHider({shouldHideSplash, onHide}: SplashScreenHiderProps):
                 ),
             );
         });
-    });
-
-    useEffect(() => {
-        if (!shouldHideSplash) {
-            return;
-        }
-        hide();
-    }, [shouldHideSplash]);
+    }, [opacity, scale, onHide]);
 
     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,17 +1,11 @@
-import {useEffect, useEffectEvent} from 'react';
+import {useEffect} from 'react';
 import BootSplash from '@libs/BootSplash';
 import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types';
 
-function SplashScreenHider({shouldHideSplash, onHide}: SplashScreenHiderProps): SplashScreenHiderReturnType {
-    const hide = useEffectEvent(() => {
-        BootSplash.hide().then(() => onHide());
-    });
+function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType {
     useEffect(() => {
-        if (!shouldHideSplash) {
-            return;
-        }
-        hide();
-    }, [shouldHideSplash]);
+        BootSplash.hide().then(() => onHide());
+    }, [onHide]);
 
     return null;
 }

src/components/SplashScreenHider/types.ts

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