diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index e01d0fe3115f..0527bd8c868f 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -2,10 +2,11 @@ import {findFocusedRoute} from '@react-navigation/native'; import React, {memo, useEffect, useRef, useState} from 'react'; import {NativeModules, View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import Onyx, {withOnyx} from 'react-native-onyx'; +import Onyx, {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import ActiveGuidesEventListener from '@components/ActiveGuidesEventListener'; import ComposeProviders from '@components/ComposeProviders'; +import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import OptionsListContextProvider from '@components/OptionListContextProvider'; import {SearchContextProvider} from '@components/Search/SearchContext'; import {useSearchRouterContext} from '@components/Search/SearchRouter/SearchRouterContext'; @@ -58,6 +59,7 @@ import SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; import type ReactComponentModule from '@src/types/utils/ReactComponentModule'; import beforeRemoveReportOpenedFromSearchRHP from './beforeRemoveReportOpenedFromSearchRHP'; import CENTRAL_PANE_SCREENS from './CENTRAL_PANE_SCREENS'; @@ -75,17 +77,6 @@ import RightModalNavigator from './Navigators/RightModalNavigator'; import WelcomeVideoModalNavigator from './Navigators/WelcomeVideoModalNavigator'; import useRootNavigatorOptions from './useRootNavigatorOptions'; -type AuthScreensProps = { - /** Session of currently logged in user */ - session: OnyxEntry; - - /** The report ID of the last opened public room as anonymous user */ - lastOpenedPublicRoomID: OnyxEntry; - - /** The last Onyx update ID was applied to the client */ - initialLastUpdateIDAppliedToClient: OnyxEntry; -}; - const loadReportAttachments = () => require('../../../pages/home/report/ReportAttachments').default; const loadValidateLoginPage = () => require('../../../pages/ValidateLoginPage').default; const loadLogOutPreviousUserPage = () => require('../../../pages/LogOutPreviousUserPage').default; @@ -230,7 +221,11 @@ const modalScreenListenersWithCancelSearch = { }, }; -function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDAppliedToClient}: AuthScreensProps) { +function AuthScreens() { + const [session, sessionStatus] = useOnyx(ONYXKEYS.SESSION); + const [lastOpenedPublicRoomID, lastOpenedPublicRoomIDStatus] = useOnyx(ONYXKEYS.LAST_OPENED_PUBLIC_ROOM_ID); + const [initialLastUpdateIDAppliedToClient, initialLastUpdateIDAppliedToClientStatus] = useOnyx(ONYXKEYS.ONYX_UPDATES_LAST_UPDATE_ID_APPLIED_TO_CLIENT); + const areAllOnyxValuesLoadedFirstTime = useRef(true); const theme = useTheme(); const styles = useThemeStyles(); const {shouldUseNarrowLayout} = useResponsiveLayout(); @@ -238,6 +233,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie const {canUseDefaultRooms} = usePermissions(); const {activeWorkspaceID} = useActiveWorkspace(); const {toggleSearch} = useSearchRouterContext(); + const isAnyOnyxValueStillLoading = isLoadingOnyxValue(sessionStatus, lastOpenedPublicRoomIDStatus, initialLastUpdateIDAppliedToClientStatus); const modal = useRef({}); const {isOnboardingCompleted} = useOnboardingFlowRouter(); @@ -261,6 +257,11 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie }, [theme]); useEffect(() => { + if (!areAllOnyxValuesLoadedFirstTime.current || !isAnyOnyxValueStillLoading) { + return; + } + areAllOnyxValuesLoadedFirstTime.current = false; + const shortcutsOverviewShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SHORTCUTS; const searchShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SEARCH; const chatShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_CHAT; @@ -400,7 +401,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie // Rule disabled because this effect is only for component did mount & will component unmount lifecycle event // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - }, []); + }, [isAnyOnyxValueStillLoading]); const CentralPaneScreenOptions: PlatformStackNavigationOptions = { ...hideKeyboardOnSwipe, @@ -412,6 +413,10 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie }, }; + if (isAnyOnyxValueStillLoading) { + return ; + } + return ( @@ -594,20 +599,4 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie AuthScreens.displayName = 'AuthScreens'; -const AuthScreensMemoized = memo(AuthScreens, () => true); - -// Migration to useOnyx cause re-login if logout from deeplinked report in desktop app -// Further analysis required and more details can be seen here: -// https://github.com/Expensify/App/issues/50560 -// eslint-disable-next-line -export default withOnyx({ - session: { - key: ONYXKEYS.SESSION, - }, - lastOpenedPublicRoomID: { - key: ONYXKEYS.LAST_OPENED_PUBLIC_ROOM_ID, - }, - initialLastUpdateIDAppliedToClient: { - key: ONYXKEYS.ONYX_UPDATES_LAST_UPDATE_ID_APPLIED_TO_CLIENT, - }, -})(AuthScreensMemoized); +export default memo(AuthScreens, () => true);