Proper way to hide splash screen until user is completely authenticated

[ChristopherGabba]

I'm using AWS-amplify for the authentication within my app. I'm following all the guidance from amplify and have developed the following custom hook:

/* eslint-disable */
import { useEffect, useState } from "react"
import { Hub } from "aws-amplify/utils"
import { AuthError, fetchAuthSession, fetchUserAttributes } from "aws-amplify/auth"
import { useStores } from "app/models"

/**
 * This is a custom hook to look for:
 * 1. Existing auth state
 * 2. Future changes in the auth state
 */

export function useAuth(): { isAuthenticated: boolean } {

  const [authToggle, setAuthToggle] = useState(false)

  const {
    authenticationStore: { setProp },
  } = useStores()

  // isAuthenticated is simply !!authToken in the MobXStore

  useEffect(() => {
    ;(async function manageAuth() {
      try {
        const session = await fetchAuthSession()

        setProp("accessToken", session.tokens?.accessToken.toString())
        const userAttributes = await fetchUserAttributes()

      } catch (e) {
         console.log(e)
      }
    })()
  }, [authToggle])

  useEffect(() => {
    const unsubscribe = Hub.listen("auth", (data) => {
      console.log("auth changed states", data)
      setAuthToggle((prev) => !prev)
    })

    return () => unsubscribe()
  }, [])

  return { isAuthenticated }
}

here is a simplified nav stack from AppNavigator.ts

const { isAuthenticated } = useAuth()

  return (
    <Stack.Navigator
      initialRouteName={isAuthenticated ? "Tab" : "LoginSignUp"}
    >
      {isAuthenticated ? (
        <>
          <Stack.Screen name="Tab" component={TabNavigator} />
        </>
      ) : (
        <>
          <Stack.Screen name="LoginSignUp" component={Screens.LoginSignUpScreen} />
        </>
      )}
    </Stack.Navigator>

I'm using ignite's introductory way to manage authentication using the setProp("authToken", "ABCD123") method and it truly works fine with one exception -- every now and then the splash screen disappears before the authentication is done processing and the LoginSignUp screen shows for a second and then transitions into the app when the auth has finished processing.

Surely the solution is not literally to just add a delay in app.tsx to the useInitialRootStore hook as suggested in the ignite boilerplate:

  const { rehydrated } = useInitialRootStore(() => {
    // This runs after the root store has been initialized and rehydrated.

    // If your initialization scripts run very fast, it's good to show the splash screen for just a bit longer to prevent flicker.
    // Slightly delaying splash screen hiding for better UX; can be customized or removed as needed,
    // Note: (vanilla Android) The splash-screen will not appear if you launch your app via the terminal or Android Studio. Kill the app and launch it normally by tapping on the launcher icon. https://stackoverflow.com/a/69831106
    // Note: (vanilla iOS) You might notice the splash-screen logo change size. This happens in debug/development mode. Try building the app for release.
    setTimeout(hideSplashScreen, 2500)
  })

While trickling up the delay time on the set timeout does work 90%, it doesn't fix the problem completely. There is still one time in ten where it takes the auth a little longer to process and you get the transition. I'm curious what infinitered suggests to do here...

Thanks,
Chris