fix(clerk-js,ui): Preload component chunks in parallel during mount#7901
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: ac04f66 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 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 |
|
!snapshot |
|
Hey @jacekradko - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.3.0-snapshot.v20260221025222 --save-exact
npm i @clerk/astro@3.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/backend@3.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/chrome-extension@3.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/clerk-js@6.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/dev-cli@1.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/expo@3.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/express@2.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/fastify@2.7.0-snapshot.v20260221025222 --save-exact
npm i @clerk/localizations@4.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/msw@0.0.1-snapshot.v20260221025222 --save-exact
npm i @clerk/nextjs@7.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/nuxt@2.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/react@6.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/react-router@3.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/shared@4.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/testing@2.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/ui@1.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/upgrade@2.0.0-snapshot.v20260221025222 --save-exact
npm i @clerk/vue@2.0.0-snapshot.v20260221025222 --save-exact |
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@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: |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis pull request adds a 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
Replace the keepMounted Popover approach with chunk preloading. Pass preloadHint to ensureMounted() from all mount methods so component chunks download in parallel with the common chunk, eliminating the sequential waterfall on slow connections. Move preloadComponent() call outside the first-call guard so it fires on every ensureMounted() call.
jacekradko
force-pushed
the
jacek/user-4747-ui-delay-opening-user-menu-and-org-switcher-on-slow-internet
branch
from
9b06f86 to
cdc7d44
Compare
The __mocks__ directory in src/elements/ was not detected by Vitest for node_module mocks, so auto-animate ran in tests and leaked timers that fired after jsdom teardown, causing requestAnimationFrame errors.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/clerk-js/vitest.setup.mts`:
- Around line 265-270: Add unit tests that exercise the new preload/mount flow
and assert the component lifecycle now uses the explicit auto-animate mock:
write tests that simulate the preload step and then mount/render the component
and verify expected post-preload behavior (e.g., DOM state, callbacks invoked,
side effects) and that '@formkit/auto-animate/react' is mocked via
useAutoAnimate returning [null]; update or add tests in the clerk-js test suite
to cover both the preload->mount transition and that useAutoAnimate is not
causing timers or animations to run during teardown to prevent regressions.
| // Mock @formkit/auto-animate to prevent timers leaking after test teardown. | ||
| // The __mocks__ directory in src/elements/ is not detected by Vitest for | ||
| // node_module mocks, so we need an explicit vi.mock here. | ||
| vi.mock('@formkit/auto-animate/react', () => ({ | ||
| useAutoAnimate: () => [null], | ||
| })); |
There was a problem hiding this comment.
Add tests covering the behavioral change introduced in this PR.
No tests were added or updated to cover the new preload/mount behavior and the explicit auto-animate mock. Please add/adjust tests to validate the changed flow and guard against regressions.
As per coding guidelines “If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.”
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/clerk-js/vitest.setup.mts` around lines 265 - 270, Add unit tests
that exercise the new preload/mount flow and assert the component lifecycle now
uses the explicit auto-animate mock: write tests that simulate the preload step
and then mount/render the component and verify expected post-preload behavior
(e.g., DOM state, callbacks invoked, side effects) and that
'@formkit/auto-animate/react' is mocked via useAutoAnimate returning [null];
update or add tests in the clerk-js test suite to cover both the preload->mount
transition and that useAutoAnimate is not causing timers or animations to run
during teardown to prevent regressions.
There was a problem hiding this comment.
@jacekradko, thanks for clarifying! I see that tests are being handled in #7903. That works perfectly.
…nd-org-switcher-on-slow-internet
…nd-org-switcher-on-slow-internet
…nd-org-switcher-on-slow-internet
nikosdouvlis
left a comment
nikosdouvlis
left a comment
There was a problem hiding this comment.
Makes sense, one question about the open* methods
jacekradko
deleted the
jacek/user-4747-ui-delay-opening-user-menu-and-org-switcher-on-slow-internet
branch
3 participants
Summary
preloadComponent()outside the first-call guard inensureMounted()so it fires on every call, not just the firstpreloadHintfrom all 16mount*methods toensureMounted()Resolves USER-4747
Testing PR: https://github.com/clerk/dashboard/pull/8496
How it works
On initial mount (first call to
ensureMounted), preloading already worked —preloadComponent()fired inside theif (!componentsControlsResolver)block before the common chunk import, so the component chunk and common chunk downloaded in parallel.The bug was on subsequent mounts. When a different component was already mounted (e.g.
<SignIn />mounts first, then later<UserButton />mounts),componentsControlsResolveris already defined, so the entireif (!componentsControlsResolver)block — includingpreloadComponent()— was skipped. The flow became:ensureMounted()resolves immediately (common chunk already loaded)mountComponent()triggers React renderlazy()component → only then starts downloading the component chunkBy moving the preload call outside the guard, every
mount*()call immediately starts downloading its component chunk, even when the Components renderer is already initialized.preloadComponentis idempotent (webpack/rspack caches the import promise), so repeated calls are safe.Before (subsequent mount)
After (subsequent mount)
Test plan
pnpm buildpassespnpm testpassesgit diff main --statshows only intended changesSummary by CodeRabbit