Stepper: Move conservative lazy loading (#97326)

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,

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 () => {
 						/>
 					</BrowserRouter>
 					<AsyncHelpCenter />
-
 					{ 'development' === process.env.NODE_ENV && (
 						<AsyncLoad require="calypso/components/webpack-build-monitor" placeholder={ null } />
 					) }

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