Skip to content

feat(ui): Simplify chunk config, optimize modal initialization #7451

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.

Sign up for GitHub

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

Closed
brkalow wants to merge 3 commits into from
Closed

feat(ui): Simplify chunk config, optimize modal initialization #7451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
074f96d
optimize chunking and improve lazy initialization of modals
brkalow Dec 13, 2025
cf8053e
update lockfile
brkalow Dec 13, 2025
5e852eb
merge main
jacekradko Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .changeset/chatty-papers-obey.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
2 changes: 1 addition & 1 deletion packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
},
"devDependencies": {
"@floating-ui/react-dom": "^2.1.6",
"@rsdoctor/rspack-plugin": "^0.4.13",
"@rsdoctor/rspack-plugin": "^1.0.5",
Comment thread
coderabbitai[bot] marked this conversation as resolved.
"@rspack/cli": "^1.6.0",
"@rspack/core": "^1.6.0",
"@rspack/plugin-react-refresh": "^1.5.2",
Expand Down
31 changes: 10 additions & 21 deletions packages/ui/rspack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,30 +85,12 @@ const common = ({ mode, variant }) => {
optimization: {
splitChunks: {
cacheGroups: {
/**
* Sign up is shared between the SignUp component and the SignIn component.
*/
signUp: {
minChunks: 1,
name: 'signup',
test: module =>
!!(
module instanceof rspack.NormalModule &&
module.resource &&
module.resource.includes('/components/SignUp')
),
},
common: {
minChunks: 1,
name: 'ui-common',
priority: -20,
test: module =>
!!(
module instanceof rspack.NormalModule &&
module.resource &&
!module.resource.includes('/components') &&
!module.resource.includes('node_modules')
),
!!(module instanceof rspack.NormalModule && module.resource && !module.resource.includes('/components')),
},
defaultVendors: {
minChunks: 1,
Expand Down Expand Up @@ -279,7 +261,14 @@ const devConfig = (mode, env) => {
port,
hot: true,
liveReload: false,
client: { webSocketURL: `auto://${devUrl.host}/ws` },
client: {
overlay: {
errors: true,
warnings: true,
runtimeErrors: false,
},
webSocketURL: `auto://${devUrl.host}/ws`,
},
},
cache: false,
experiments: {
Expand All @@ -293,7 +282,7 @@ const devConfig = (mode, env) => {
});
};

export default env => {
export default async env => {
const mode = env.production ? 'production' : 'development';
const analysis = !!env.analyze;
return isProduction(mode) ? prodConfig({ mode, analysis }) : devConfig(mode, env);
Expand Down
316 changes: 148 additions & 168 deletions packages/ui/src/Components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -482,165 +482,6 @@ const Components = (props: ComponentsProps) => {
props.onComponentsMounted();
}, []);

const mountedOneTapModal = (
<LazyOneTapRenderer
componentProps={googleOneTapModal}
globalAppearance={state.appearance}
componentAppearance={googleOneTapModal?.appearance}
startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}
/>
);

const mountedSignInModal = (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'signIn'}
componentAppearance={signInModal?.appearance}
flowName={'signIn'}
onClose={() => componentsControls.closeModal('signIn')}
onExternalNavigate={() => componentsControls.closeModal('signIn')}
startPath={buildVirtualRouterUrl({ base: '/sign-in', path: urlStateParam?.path })}
getContainer={signInModal?.getContainer}
componentName={'SignInModal'}
>
<SignInModal {...signInModal} />
<SignUpModal {...disambiguateRedirectOptions(signInModal, 'signin')} />
<WaitlistModal {...waitlistModal} />
</LazyModalRenderer>
);

const mountedSignUpModal = (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'signUp'}
componentAppearance={signUpModal?.appearance}
flowName={'signUp'}
onClose={() => componentsControls.closeModal('signUp')}
onExternalNavigate={() => componentsControls.closeModal('signUp')}
startPath={buildVirtualRouterUrl({ base: '/sign-up', path: urlStateParam?.path })}
getContainer={signUpModal?.getContainer}
componentName={'SignUpModal'}
>
<SignInModal {...disambiguateRedirectOptions(signUpModal, 'signup')} />
<SignUpModal {...signUpModal} />
<WaitlistModal {...waitlistModal} />
</LazyModalRenderer>
);

const mountedUserProfileModal = (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'userProfile'}
componentAppearance={userProfileModal?.appearance}
flowName={'userProfile'}
onClose={() => componentsControls.closeModal('userProfile')}
onExternalNavigate={() => componentsControls.closeModal('userProfile')}
startPath={buildVirtualRouterUrl({
base: '/user',
path: userProfileModal?.__experimental_startPath || urlStateParam?.path,
})}
getContainer={userProfileModal?.getContainer}
componentName={'UserProfileModal'}
modalContainerSx={{ alignItems: 'center' }}
modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
>
<UserProfileModal {...userProfileModal} />
</LazyModalRenderer>
);

const mountedUserVerificationModal = (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'userVerification'}
componentAppearance={userVerificationModal?.appearance}
flowName={'userVerification'}
onClose={() => componentsControls.closeModal('userVerification')}
onExternalNavigate={() => componentsControls.closeModal('userVerification')}
startPath={buildVirtualRouterUrl({ base: '/user-verification', path: urlStateParam?.path })}
getContainer={userVerificationModal?.getContainer}
componentName={'UserVerificationModal'}
modalContainerSx={{ alignItems: 'center' }}
>
<UserVerificationModal {...userVerificationModal} />
</LazyModalRenderer>
);

const mountedOrganizationProfileModal = (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'organizationProfile'}
componentAppearance={organizationProfileModal?.appearance}
flowName={'organizationProfile'}
onClose={() => componentsControls.closeModal('organizationProfile')}
onExternalNavigate={() => componentsControls.closeModal('organizationProfile')}
startPath={buildVirtualRouterUrl({
base: '/organizationProfile',
path: organizationProfileModal?.__experimental_startPath || urlStateParam?.path,
})}
getContainer={organizationProfileModal?.getContainer}
componentName={'OrganizationProfileModal'}
modalContainerSx={{ alignItems: 'center' }}
modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
>
<OrganizationProfileModal {...organizationProfileModal} />
</LazyModalRenderer>
);

const mountedCreateOrganizationModal = (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'createOrganization'}
componentAppearance={createOrganizationModal?.appearance}
flowName={'createOrganization'}
onClose={() => componentsControls.closeModal('createOrganization')}
onExternalNavigate={() => componentsControls.closeModal('createOrganization')}
startPath={buildVirtualRouterUrl({ base: '/createOrganization', path: urlStateParam?.path })}
getContainer={createOrganizationModal?.getContainer}
componentName={'CreateOrganizationModal'}
modalContainerSx={{ alignItems: 'center' }}
modalContentSx={t => ({ height: `min(${t.sizes.$120}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
>
<CreateOrganizationModal {...createOrganizationModal} />
</LazyModalRenderer>
);

const mountedWaitlistModal = (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'waitlist'}
componentAppearance={waitlistModal?.appearance}
flowName={'waitlist'}
onClose={() => componentsControls.closeModal('waitlist')}
onExternalNavigate={() => componentsControls.closeModal('waitlist')}
startPath={buildVirtualRouterUrl({ base: '/waitlist', path: urlStateParam?.path })}
getContainer={waitlistModal?.getContainer}
componentName={'WaitlistModal'}
>
<WaitlistModal {...waitlistModal} />
<SignInModal {...waitlistModal} />
</LazyModalRenderer>
);

const mountedBlankCaptchaModal = (
/**
* Captcha modal should not close on `Clerk.navigate()`, hence we are not passing `onExternalNavigate`.
*/
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'blankCaptcha' as any}
componentAppearance={{}}
flowName={'blankCaptcha'}
onClose={() => componentsControls.closeModal('blankCaptcha')}
startPath={buildVirtualRouterUrl({ base: '/blank-captcha', path: urlStateParam?.path })}
componentName={'BlankCaptchaModal'}
canCloseModal={false}
modalId={'cl-modal-captcha-wrapper'}
modalStyle={{ visibility: 'hidden', pointerEvents: 'none' }}
>
<BlankCaptchaModal />
</LazyModalRenderer>
);

return (
<Suspense fallback={''}>
<LazyProviders
Expand All @@ -663,15 +504,154 @@ const Components = (props: ComponentsProps) => {
);
})}

{googleOneTapModal && mountedOneTapModal}
{signInModal && mountedSignInModal}
{signUpModal && mountedSignUpModal}
{userProfileModal && mountedUserProfileModal}
{userVerificationModal && mountedUserVerificationModal}
{organizationProfileModal && mountedOrganizationProfileModal}
{createOrganizationModal && mountedCreateOrganizationModal}
{waitlistModal && mountedWaitlistModal}
{blankCaptchaModal && mountedBlankCaptchaModal}
{googleOneTapModal && (
<LazyOneTapRenderer
componentProps={googleOneTapModal}
globalAppearance={state.appearance}
componentAppearance={googleOneTapModal?.appearance}
startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}
/>
)}

{signInModal && (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'signIn'}
componentAppearance={signInModal?.appearance}
flowName={'signIn'}
onClose={() => componentsControls.closeModal('signIn')}
onExternalNavigate={() => componentsControls.closeModal('signIn')}
startPath={buildVirtualRouterUrl({ base: '/sign-in', path: urlStateParam?.path })}
componentName={'SignInModal'}
>
<SignInModal {...signInModal} />
<SignUpModal {...disambiguateRedirectOptions(signInModal, 'signin')} />
<WaitlistModal {...waitlistModal} />
</LazyModalRenderer>
)}

{signUpModal && (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'signUp'}
componentAppearance={signUpModal?.appearance}
flowName={'signUp'}
onClose={() => componentsControls.closeModal('signUp')}
onExternalNavigate={() => componentsControls.closeModal('signUp')}
startPath={buildVirtualRouterUrl({ base: '/sign-up', path: urlStateParam?.path })}
componentName={'SignUpModal'}
>
<SignInModal {...disambiguateRedirectOptions(signUpModal, 'signup')} />
<SignUpModal {...signUpModal} />
<WaitlistModal {...waitlistModal} />
</LazyModalRenderer>
)}

{userProfileModal && (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'userProfile'}
componentAppearance={userProfileModal?.appearance}
flowName={'userProfile'}
onClose={() => componentsControls.closeModal('userProfile')}
onExternalNavigate={() => componentsControls.closeModal('userProfile')}
startPath={buildVirtualRouterUrl({
base: '/user',
path: userProfileModal?.__experimental_startPath || urlStateParam?.path,
})}
componentName={'UserProfileModal'}
modalContainerSx={{ alignItems: 'center' }}
modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
>
<UserProfileModal {...userProfileModal} />
</LazyModalRenderer>
)}

{userVerificationModal && (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'userVerification'}
componentAppearance={userVerificationModal?.appearance}
flowName={'userVerification'}
onClose={() => componentsControls.closeModal('userVerification')}
onExternalNavigate={() => componentsControls.closeModal('userVerification')}
startPath={buildVirtualRouterUrl({ base: '/user-verification', path: urlStateParam?.path })}
componentName={'UserVerificationModal'}
modalContainerSx={{ alignItems: 'center' }}
>
<UserVerificationModal {...userVerificationModal} />
</LazyModalRenderer>
)}

{organizationProfileModal && (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'organizationProfile'}
componentAppearance={organizationProfileModal?.appearance}
flowName={'organizationProfile'}
onClose={() => componentsControls.closeModal('organizationProfile')}
onExternalNavigate={() => componentsControls.closeModal('organizationProfile')}
startPath={buildVirtualRouterUrl({
base: '/organizationProfile',
path: organizationProfileModal?.__experimental_startPath || urlStateParam?.path,
})}
componentName={'OrganizationProfileModal'}
modalContainerSx={{ alignItems: 'center' }}
modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
>
<OrganizationProfileModal {...organizationProfileModal} />
</LazyModalRenderer>
)}

{createOrganizationModal && (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'createOrganization'}
componentAppearance={createOrganizationModal?.appearance}
flowName={'createOrganization'}
onClose={() => componentsControls.closeModal('createOrganization')}
onExternalNavigate={() => componentsControls.closeModal('createOrganization')}
startPath={buildVirtualRouterUrl({ base: '/createOrganization', path: urlStateParam?.path })}
componentName={'CreateOrganizationModal'}
modalContainerSx={{ alignItems: 'center' }}
modalContentSx={t => ({ height: `min(${t.sizes.$120}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
>
<CreateOrganizationModal {...createOrganizationModal} />
</LazyModalRenderer>
)}

{waitlistModal && (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'waitlist'}
componentAppearance={waitlistModal?.appearance}
flowName={'waitlist'}
onClose={() => componentsControls.closeModal('waitlist')}
onExternalNavigate={() => componentsControls.closeModal('waitlist')}
startPath={buildVirtualRouterUrl({ base: '/waitlist', path: urlStateParam?.path })}
componentName={'WaitlistModal'}
>
<WaitlistModal {...waitlistModal} />
<SignInModal {...waitlistModal} />
</LazyModalRenderer>
)}

{blankCaptchaModal && (
<LazyModalRenderer
globalAppearance={state.appearance}
appearanceKey={'blankCaptcha' as any}
componentAppearance={{}}
flowName={'blankCaptcha'}
onClose={() => componentsControls.closeModal('blankCaptcha')}
startPath={buildVirtualRouterUrl({ base: '/blank-captcha', path: urlStateParam?.path })}
componentName={'BlankCaptchaModal'}
canCloseModal={false}
modalId={'cl-modal-captcha-wrapper'}
modalStyle={{ visibility: 'hidden', pointerEvents: 'none' }}
>
<BlankCaptchaModal />
</LazyModalRenderer>
)}

<MountedCheckoutDrawer
appearance={state.appearance}
Expand Down
Loading
Loading