diff --git a/client/landing/stepper/declarative-flow/internals/index.tsx b/client/landing/stepper/declarative-flow/internals/index.tsx index 69c67a33d609d..aef885c78b77d 100644 --- a/client/landing/stepper/declarative-flow/internals/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/index.tsx @@ -90,15 +90,29 @@ export const FlowRenderer: React.FC< { flow: Flow } > = ( { flow } ) => { // See https://github.com/Automattic/wp-calypso/pull/82981. const selectedSite = useSelector( ( state ) => site && getSite( state, siteSlugOrId ) ); - // this pre-loads all the lazy steps down the flow. + // this pre-loads the next step in the flow. useEffect( () => { + const nextStepIndex = flowSteps.findIndex( ( step ) => step.slug === currentStepRoute ) + 1; + const nextStep = flowSteps[ nextStepIndex ]; + + // 0 implies the findIndex returned -1. + if ( nextStepIndex === 0 || ! nextStep ) { + return; + } + if ( siteSlugOrId && ! selectedSite ) { // If this step depends on a selected site, only preload after we have the data. // Otherwise, we're still waiting to render something meaningful, and we don't want to // potentially slow that down by having the CPU busy initialising future steps. return; } - Promise.all( flowSteps.map( ( step ) => 'asyncComponent' in step && step.asyncComponent() ) ); + if ( + // Don't load anything on user step because the user step will hard-navigate anyways. + currentStepRoute !== 'user' && + 'asyncComponent' in nextStep + ) { + nextStep.asyncComponent(); + } // Most flows sadly instantiate a new steps array on every call to `flow.useSteps()`, // which means that we don't want to depend on `flowSteps` here, or this would end up // running on every render. We thus depend on `flow` instead. @@ -107,7 +121,7 @@ export const FlowRenderer: React.FC< { flow: Flow } > = ( { flow } ) => { // different points. But even if they do, worst case scenario we only fail to preload // some steps, and they'll simply be loaded later. // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ flow, siteSlugOrId, selectedSite ] ); + }, [ siteSlugOrId, selectedSite, currentStepRoute, flow ] ); const stepNavigation = useStepNavigationWithTracking( { flow, diff --git a/client/landing/stepper/index.tsx b/client/landing/stepper/index.tsx index 5063d7805626d..a2212327e4b29 100644 --- a/client/landing/stepper/index.tsx +++ b/client/landing/stepper/index.tsx @@ -158,7 +158,8 @@ window.AppBoot = async () => { reduxStore.dispatch( setCurrentFlowName( flow.name ) ); reduxStore.dispatch( setSelectedSiteId( siteId ) as unknown as AnyAction ); - await geolocateCurrencySymbol(); + // No need to await this, it's not critical to the boot process and will slow booting down. + geolocateCurrencySymbol(); const root = createRoot( document.getElementById( 'wpcom' ) as HTMLElement ); @@ -179,7 +180,6 @@ window.AppBoot = async () => { /> - { 'development' === process.env.NODE_ENV && ( ) } diff --git a/client/landing/stepper/utils/enhanceFlowWithAuth.ts b/client/landing/stepper/utils/enhanceFlowWithAuth.ts index 278aa4cf4f59d..2e2c823bcf732 100644 --- a/client/landing/stepper/utils/enhanceFlowWithAuth.ts +++ b/client/landing/stepper/utils/enhanceFlowWithAuth.ts @@ -2,7 +2,10 @@ import type { Flow, StepperStep } from '../declarative-flow/internals/types'; const USER_STEP: StepperStep = { slug: 'user', - asyncComponent: () => import( '../declarative-flow/internals/steps-repository/__user' ), + asyncComponent: () => + import( + /* webpackChunkName: "stepper-user-step" */ '../declarative-flow/internals/steps-repository/__user' + ), }; function useInjectUserStepIfNeeded( flow: Flow ): StepperStep[] {