fix(ui): Avoid domain and billing loading shifts#9169
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: ae57ca4 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 |
Contributor
📝 WalkthroughWalkthroughThe UI loading states now reserve space for domain lists, payment methods, and subscriptions. Subscription loading displays a full-height loader before subscription content and actions, while the domain spinner container uses reduced spacing. ChangesLoading layout stabilization
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
Contributor
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
alexcarpenter
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/components/PaymentMethods/PaymentMethods.tsx`:
- Around line 145-147: Update the loading branches in
packages/ui/src/components/PaymentMethods/PaymentMethods.tsx (lines 145-147) and
packages/ui/src/components/Subscriptions/SubscriptionsList.tsx (lines 97-102) to
reserve space matching their loaded content: include all payment-method rows and
the add action in PaymentMethods, and multiple subscription, seat, overview, and
action rows in SubscriptionsList. Replace the fixed-height loaders with
appropriately sized skeleton structures or dynamic reserved layouts to prevent
layout shifts.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Repository UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 356d49c0-ff2f-4190-a345-177cd1cacd2d
📒 Files selected for processing (3)
.changeset/fix-loading-shift.mdpackages/ui/src/components/PaymentMethods/PaymentMethods.tsxpackages/ui/src/components/Subscriptions/SubscriptionsList.tsx
Comment on lines
+145
to
+147
| <Box sx={t => ({ height: t.space.$16 })}> | ||
| <FullHeightLoader /> | ||
| </Box> |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Fixed loading heights do not match variable loaded content.
Both loaders can still cause layout shifts because their loaded branches render variable numbers of rows and actions.
packages/ui/src/components/PaymentMethods/PaymentMethods.tsx#L145-L147: reserve space for all payment-method rows and the add action, or use a matching skeleton structure.packages/ui/src/components/Subscriptions/SubscriptionsList.tsx#L97-L102: account for multiple subscription, seat, overview, and action rows instead of reserving one fixed card height.
📍 Affects 2 files
packages/ui/src/components/PaymentMethods/PaymentMethods.tsx#L145-L147(this comment)packages/ui/src/components/Subscriptions/SubscriptionsList.tsx#L97-L102
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/components/PaymentMethods/PaymentMethods.tsx` around lines
145 - 147, Update the loading branches in
packages/ui/src/components/PaymentMethods/PaymentMethods.tsx (lines 145-147) and
packages/ui/src/components/Subscriptions/SubscriptionsList.tsx (lines 97-102) to
reserve space matching their loaded content: include all payment-method rows and
the add action in PaymentMethods, and multiple subscription, seat, overview, and
action rows in SubscriptionsList. Replace the fixed-height loaders with
appropriately sized skeleton structures or dynamic reserved layouts to prevent
layout shifts.
maxyinger
approved these changes
Jul 15, 2026
maxyinger
left a comment
maxyinger
left a comment
Collaborator
There was a problem hiding this comment.
this has been on my list. Nice work!
dstaley
approved these changes
Jul 15, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Reduce layout shift while the organization and billing UI load. Each section now reserves its loaded height while data is fetched, so surrounding content no longer jumps when it resolves.
Domains BEFORE
before.mov
Domains AFTER
after.mov
Billing BEFORE
billing-before.mov
Billing AFTER
billing-after.mov
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit