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[] {