diff --git a/src/libs/Navigation/AppNavigator/index.tsx b/src/libs/Navigation/AppNavigator/index.tsx index bdf411f98659..ac70d7167246 100644 --- a/src/libs/Navigation/AppNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/index.tsx @@ -1,14 +1,13 @@ import React, {lazy, memo, Suspense, useEffect, useState} from 'react'; import {preload, register} from 'react-native-bundle-splitter'; -import lazyRetry from '@src/utils/lazyRetry'; +import lazyRetry, {retryImport} from '@src/utils/lazyRetry'; -// const AuthScreens = lazy(() => lazyRetry(() => import('./AuthScreens'))); const PublicScreens = lazy(() => lazyRetry(() => import('./PublicScreens'))); +const AUTH_SCREENS = 'AuthScreens'; const AuthScreens = register({ - name: 'AuthScreens', - // TODO: add retry logic - loader: () => import('./AuthScreens'), + name: AUTH_SCREENS, + loader: () => retryImport(() => import('./AuthScreens')), }); type AppNavigatorProps = { @@ -20,10 +19,10 @@ function AppNavigator({authenticated}: AppNavigatorProps) { const [canNavigateToProtectedRoutes, setNavigateToProtectedRoutes] = useState(false); useEffect(() => { - // Preload Auth Screens to be sure navigator can be mounted synchronously to avoid problems - // described in https://github.com/Expensify/App/issues/44600 + // Preload Auth Screens in advance to be sure that navigator can be mounted synchronously + // to avoid problems described in https://github.com/Expensify/App/issues/44600 preload() - .component('AuthScreens') + .component(AUTH_SCREENS) .then(() => { setNavigateToProtectedRoutes(true); }); diff --git a/src/utils/lazyRetry.ts b/src/utils/lazyRetry.ts index 35c6b444e612..5bcf8d3d83d0 100644 --- a/src/utils/lazyRetry.ts +++ b/src/utils/lazyRetry.ts @@ -5,6 +5,8 @@ type Import = Promise<{default: T}>; type ComponentImport = () => Import; /** + * Common retry mechanism for importing components. + * * Attempts to lazily import a React component with a retry mechanism on failure. * If the initial import fails the function will refresh the page once and retry the import. * If the import fails again after the refresh, the error is propagated. @@ -12,8 +14,7 @@ type ComponentImport = () => Import; * @param componentImport - A function that returns a promise resolving to a lazily imported React component. * @returns A promise that resolves to the imported component or rejects with an error after a retry attempt. */ -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const lazyRetry = function >(componentImport: ComponentImport): Import { +function retryImport(componentImport: ComponentImport): Import { return new Promise((resolve, reject) => { // Retrieve the retry status from sessionStorage, defaulting to 'false' if not set const hasRefreshed = JSON.parse(sessionStorage.getItem(CONST.SESSION_STORAGE_KEYS.RETRY_LAZY_REFRESHED) ?? 'false') as boolean; @@ -37,6 +38,12 @@ const lazyRetry = function >(componentImport: Compo } }); }); +} + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const lazyRetry = function >(componentImport: ComponentImport): Import { + return retryImport(componentImport); }; export default lazyRetry; +export {retryImport};