Skip to content
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

Merged
merged 7 commits into from
Mar 21, 2025

Conversation

aeliox
Copy link
Contributor

@aeliox aeliox commented Mar 21, 2025

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.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Copy link

changeset-bot bot commented Mar 21, 2025

🦋 Changeset detected

Latest commit: fe22bda

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@clerk/clerk-js Patch
@clerk/chrome-extension Patch
@clerk/clerk-expo Patch

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

Copy link

vercel bot commented Mar 21, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
clerk-js-sandbox ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 21, 2025 2:04pm

Copy link
Member

@panteliselef panteliselef left a 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={''}>
Copy link
Member

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 => ({
Copy link
Member

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.

Suggested change
import('./BillingPage').then(module => ({
import( /* webpackChunkName: "up:billing-page"*/ './BillingPage').then(module => ({

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed it here

@panteliselef panteliselef changed the title lazily load BillingPage in UserProfile fix(clerk-js): Lazily load BillingPage in UserProfile Mar 21, 2025
# Conflicts:
#	packages/clerk-js/bundlewatch.config.json
@panteliselef panteliselef merged commit 591648f into main Mar 21, 2025
30 checks passed
@panteliselef panteliselef deleted the keiran/lazy-load-billing-page branch March 21, 2025 14:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants