-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Stepper: Move conservative lazy loading #97326
Changes from 13 commits
fa7e763
9a21f0f
e2ae9bf
f4b79d3
a7080d0
9af0366
30b4197
69cc7b5
176a912
9bc8fe3
ee4b585
d387a8c
fb39a71
cf05787
924da9e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -90,15 +90,26 @@ 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 ]; | ||
|
||
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' && | ||
nextStepIndex > 0 && | ||
nextStep && | ||
'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 +118,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, isLoggedIn ] ); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What is the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You're right, it's from the previous iteration. |
||
|
||
const stepNavigation = useStepNavigationWithTracking( { | ||
flow, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice, the main Calypso boot function also doesn't awat this. |
||
|
||
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 } /> | ||
) } | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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' | ||
), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm curious why the step has such a name with the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It's hopefully an additional reminder, to the one in README, to prevent people from using it directly. |
||
}; | ||
|
||
function useInjectUserStepIfNeeded( flow: Flow ): StepperStep[] { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code style nit: let's clearly identify the condition when the next step is not found, i.e., when
findIndex() === -1
ofnextStep === undefined
, and return early. Adding1
to the -1
and then checking>0
is too convoluted IMO.