fix: start HybridApp splashScreenState as undefined until native settings arrive

src/Expensify.tsx

@@ -292,7 +292,12 @@
                     initialUrl={initialUrl}
                 />
             )}
-            {shouldHideSplash && <SplashScreenHider onHide={onSplashHide} />}
+            {(isSplashVisible || isSplashReadyToBeHidden) && (
+                <SplashScreenHider
+                    shouldHideSplash={shouldHideSplash}
+                    onHide={onSplashHide}
+                />
+            )}
         </>
     );
 }

src/HybridAppHandler.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useEffect} from 'react';
+import {useEffect} from 'react';
 import CONFIG from './CONFIG';
 import CONST from './CONST';
 import useOnyx from './hooks/useOnyx';
@@ -9,35 +9,25 @@ import Log from './libs/Log';
 import {endSpan, startSpan} from './libs/telemetry/activeSpans';
 import {addBootsplashBreadcrumb} from './libs/telemetry/bootsplashTelemetry';
 import ONYXKEYS from './ONYXKEYS';
-import {useSplashScreenActions, useSplashScreenState} from './SplashScreenStateContext';
+import {useSplashScreenActions} from './SplashScreenStateContext';
 import isLoadingOnyxValue from './types/utils/isLoadingOnyxValue';
 
 function HybridAppHandler() {
-    const {splashScreenState} = useSplashScreenState();
     const {setSplashScreenState} = useSplashScreenActions();
     const [tryNewDot, tryNewDotMetadata] = useOnyx(ONYXKEYS.NVP_TRY_NEW_DOT);
     const isLoadingTryNewDot = isLoadingOnyxValue(tryNewDotMetadata);
 
-    const finalizeTransitionFromOldDot = useCallback(
-        (hybridAppSettings: HybridAppSettings) => {
-            const loggedOutFromOldDot = !!hybridAppSettings.hybridApp.loggedOutFromOldDot;
+    const finalizeTransitionFromOldDot = (hybridAppSettings: HybridAppSettings) => {
+        const loggedOutFromOldDot = !!hybridAppSettings.hybridApp.loggedOutFromOldDot;
 
-            setupNewDotAfterTransitionFromOldDot(hybridAppSettings, tryNewDot).then(() => {
-                if (splashScreenState !== CONST.BOOT_SPLASH_STATE.VISIBLE) {
-                    addBootsplashBreadcrumb('HybridAppHandler: Splash no longer VISIBLE, skipping state transition', {splashScreenState});
-                    return;
-                }
-
-                if (loggedOutFromOldDot) {
-                    setSplashScreenState(CONST.BOOT_SPLASH_STATE.HIDDEN);
-                    endSpan(CONST.TELEMETRY.SPAN_OD_ND_TRANSITION_LOGGED_OUT);
-                } else {
-                    setSplashScreenState(CONST.BOOT_SPLASH_STATE.READY_TO_BE_HIDDEN);
-                }
-            });
-        },
-        [setSplashScreenState, splashScreenState, tryNewDot],
-    );
+        setupNewDotAfterTransitionFromOldDot(hybridAppSettings, tryNewDot).then(() => {
+            if (loggedOutFromOldDot) {
+                endSpan(CONST.TELEMETRY.SPAN_OD_ND_TRANSITION_LOGGED_OUT);
+            } else {
+                setSplashScreenState(CONST.BOOT_SPLASH_STATE.READY_TO_BE_HIDDEN);
+            }
+        });
+    };
 
     useEffect(() => {
         if (!CONFIG.IS_HYBRID_APP || isLoadingTryNewDot) {
@@ -55,6 +45,14 @@ function HybridAppHandler() {
 
             addBootsplashBreadcrumb('HybridAppHandler: Settings received', {loggedOutFromOldDot: String(!!hybridAppSettings.hybridApp.loggedOutFromOldDot)});
 
+            // Resolve splash state ASAP — this is the earliest moment we know
+            // whether the native splash is on screen or not
+            if (hybridAppSettings.hybridApp.loggedOutFromOldDot) {
+                setSplashScreenState(CONST.BOOT_SPLASH_STATE.HIDDEN);
+            } else {
+                setSplashScreenState(CONST.BOOT_SPLASH_STATE.VISIBLE);
+            }
+
             if (hybridAppSettings.hybridApp.loggedOutFromOldDot) {
                 startSpan(CONST.TELEMETRY.SPAN_OD_ND_TRANSITION_LOGGED_OUT, {
                     name: CONST.TELEMETRY.SPAN_OD_ND_TRANSITION_LOGGED_OUT,
@@ -71,7 +69,7 @@ function HybridAppHandler() {
 
             finalizeTransitionFromOldDot(hybridAppSettings);
         });
-    }, [finalizeTransitionFromOldDot, isLoadingTryNewDot]);
+    }, [finalizeTransitionFromOldDot, isLoadingTryNewDot, setSplashScreenState]);
 
     return null;
 }

src/SplashScreenStateContext.tsx

@@ -1,21 +1,22 @@
 import React, {useContext, useEffect, useState} from 'react';
 import type {ValueOf} from 'type-fest';
+import CONFIG from './CONFIG';
 import CONST from './CONST';
 import {addBootsplashBreadcrumb} from './libs/telemetry/bootsplashTelemetry';
 import type ChildrenProps from './types/utils/ChildrenProps';
 
 type SplashScreenState = ValueOf<typeof CONST.BOOT_SPLASH_STATE>;
 
 type SplashScreenStateContextType = {
-    splashScreenState: SplashScreenState;
+    splashScreenState: SplashScreenState | undefined;
 };
 
 type SplashScreenActionsContextType = {
     setSplashScreenState: (state: SplashScreenState) => void;
 };
 
 const SplashScreenStateContext = React.createContext<SplashScreenStateContextType>({
-    splashScreenState: CONST.BOOT_SPLASH_STATE.VISIBLE,
+    splashScreenState: undefined,
 });
 
 const SplashScreenActionsContext = React.createContext<SplashScreenActionsContextType>({
@@ -29,7 +30,7 @@ function loadPostSplashScreenModules() {
 }
 
 function SplashScreenStateContextProvider({children}: ChildrenProps) {
-    const [splashScreenState, setSplashScreenStateRaw] = useState<SplashScreenState>(CONST.BOOT_SPLASH_STATE.VISIBLE);
+    const [splashScreenState, setSplashScreenStateRaw] = useState<SplashScreenState | undefined>(CONFIG.IS_HYBRID_APP ? undefined : CONST.BOOT_SPLASH_STATE.VISIBLE);
 
     const setSplashScreenState = (state: SplashScreenState) => {
         addBootsplashBreadcrumb(`splashScreenState changed to ${state}`);

src/libs/telemetry/bootsplashTelemetry.ts

@@ -16,7 +16,7 @@ function addBootsplashBreadcrumb(message: string, data?: Record<string, string>,
 }
 
 type BootsplashGateStatus = {
-    splashScreenState: string;
+    splashScreenState: string | undefined;
     isOnyxMigrated: boolean;
     isCheckingPublicRoom: boolean;
     hasAttemptedToOpenPublicRoom: boolean;
@@ -35,7 +35,7 @@ function startBootsplashMonitor(gateStatusRef: React.RefObject<BootsplashGateSta
         const appState = AppState.currentState;
         Log.info('[BootSplash] splash screen status', false, {appState, splashScreenState: currentGateStatus?.splashScreenState});
 
-        if (currentGateStatus?.splashScreenState !== CONST.BOOT_SPLASH_STATE.VISIBLE) {
+        if (currentGateStatus?.splashScreenState !== CONST.BOOT_SPLASH_STATE.VISIBLE && currentGateStatus?.splashScreenState !== undefined) {
             clearInterval(intervalId);
             return;
         }