-
Notifications
You must be signed in to change notification settings - Fork 328
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
fix(clerk-js): Lazily load BillingPage in UserProfile #5409
Conversation
🦋 Changeset detectedLatest commit: fe22bda The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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.
Let's get this out asap as it affects all users.
@@ -52,7 +59,9 @@ export const UserProfileRoutes = () => { | |||
<Route path={isBillingPageRoot ? undefined : 'billing'}> | |||
<Switch> | |||
<Route index> | |||
<BillingPage /> | |||
<Suspense fallback={''}> |
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.
We probably need a proper skeleton, but we can add it later.
@@ -14,6 +15,12 @@ export const UserProfileRoutes = () => { | |||
const isSecurityPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.SECURITY; | |||
const isBillingPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.BILLING; | |||
|
|||
const BillingPage = lazy(() => | |||
import('./BillingPage').then(module => ({ |
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.
Let's track its size, and add it to bundlewatch config.
import('./BillingPage').then(module => ({ | |
import( /* webpackChunkName: "up:billing-page"*/ './BillingPage').then(module => ({ |
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.
Changed it here
# Conflicts: # packages/clerk-js/bundlewatch.config.json
Description
Lazy load BillingPage only when commerce is enabled, to avoid unnecessary loading of Stripe.
Checklist
pnpm test
runs as expected.pnpm build
runs as expected.Type of change