feat(clerk-js): Lazy load Sign up on Combined flow

.changeset/olive-humans-leave.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+On `<SignIn/>` mount, load `<SignUp/>` on combined flow.

packages/clerk-js/bundlewatch.config.json

@@ -11,8 +11,8 @@
     { "path": "./dist/organizationprofile*.js", "maxSize": "12KB" },
     { "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" },
     { "path": "./dist/organizationlist*.js", "maxSize": "5.5KB" },
-    { "path": "./dist/signin*.js", "maxSize": "12.1KB" },
-    { "path": "./dist/signup*.js", "maxSize": "10KB" },
+    { "path": "./dist/signin*.js", "maxSize": "12.4KB" },
+    { "path": "./dist/signup*.js", "maxSize": "6.4KB" },
     { "path": "./dist/userbutton*.js", "maxSize": "5KB" },
     { "path": "./dist/userprofile*.js", "maxSize": "15KB" },
     { "path": "./dist/userverification*.js", "maxSize": "5KB" },

packages/clerk-js/rspack.config.js

@@ -85,6 +85,14 @@ const common = ({ mode, disableRHC = false }) => {
             name: 'coinbase-wallet-sdk',
             chunks: 'all',
           },
+          /**
+           * Sign up is shared between the SignUp component and the SignIn component.
+           */
+          signUp: {
+            minChunks: 1,
+            name: 'sign-up',
+            test: module => module.resource && module.resource.includes('/ui/components/SignUp'),
+          },
           common: {
             minChunks: 1,
             name: 'ui-common',

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -13,12 +13,16 @@ import {
   withCoreSessionSwitchGuard,
 } from '../../contexts';
 import { Flow } from '../../customizables';
+import { useFetch } from '../../hooks';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
-import { SignUpContinue } from '../SignUp/SignUpContinue';
-import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
-import { SignUpStart } from '../SignUp/SignUpStart';
-import { SignUpVerifyEmail } from '../SignUp/SignUpVerifyEmail';
-import { SignUpVerifyPhone } from '../SignUp/SignUpVerifyPhone';
+import {
+  LazySignUpContinue,
+  LazySignUpSSOCallback,
+  LazySignUpStart,
+  LazySignUpVerifyEmail,
+  LazySignUpVerifyPhone,
+  preloadSignUp,
+} from './lazy-sign-up';
 import { ResetPassword } from './ResetPassword';
 import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
@@ -76,22 +80,23 @@ function SignInRoutes(): JSX.Element {
             redirectUrl='../factor-two'
           />
         </Route>
+
         {signInContext.isCombinedFlow && (
           <Route path='create'>
             <Route
               path='verify-email-address'
               canActivate={clerk => !!clerk.client.signUp.emailAddress}
             >
-              <SignUpVerifyEmail />
+              <LazySignUpVerifyEmail />
             </Route>
             <Route
               path='verify-phone-number'
               canActivate={clerk => !!clerk.client.signUp.phoneNumber}
             >
-              <SignUpVerifyPhone />
+              <LazySignUpVerifyPhone />
             </Route>
             <Route path='sso-callback'>
-              <SignUpSSOCallback
+              <LazySignUpSSOCallback
                 signUpUrl={signUpContext.signUpUrl}
                 signInUrl={signUpContext.signInUrl}
                 signUpForceRedirectUrl={signUpContext.afterSignUpUrl}
@@ -115,23 +120,24 @@ function SignInRoutes(): JSX.Element {
                 path='verify-email-address'
                 canActivate={clerk => !!clerk.client.signUp.emailAddress}
               >
-                <SignUpVerifyEmail />
+                <LazySignUpVerifyEmail />
               </Route>
               <Route
                 path='verify-phone-number'
                 canActivate={clerk => !!clerk.client.signUp.phoneNumber}
               >
-                <SignUpVerifyPhone />
+                <LazySignUpVerifyPhone />
               </Route>
               <Route index>
-                <SignUpContinue />
+                <LazySignUpContinue />
               </Route>
             </Route>
             <Route index>
-              <SignUpStart />
+              <LazySignUpStart />
             </Route>
           </Route>
         )}
+
         <Route index>
           <SignInStart />
         </Route>
@@ -143,6 +149,9 @@ function SignInRoutes(): JSX.Element {
   );
 }
 
+const usePreloadSignUp = (enabled = false) =>
+  useFetch(enabled ? preloadSignUp : undefined, 'preloadComponent', { staleTime: Infinity });
+
 function SignInRoot() {
   const signInContext = useSignInContext();
   const normalizedSignUpContext = {
@@ -156,6 +165,11 @@ function SignInRoot() {
     ...normalizeRoutingOptions({ routing: signInContext?.routing, path: signInContext?.path }),
   } as SignUpContextType;
 
+  /**
+   * Preload Sign Up when in Combined Flow.
+   */
+  usePreloadSignUp(signInContext.isCombinedFlow);
+
   return (
     <SignUpContext.Provider value={normalizedSignUpContext}>
       <SignInRoutes />

packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts

@@ -2,7 +2,7 @@ import type { LoadedClerk, SignUpModes, SignUpResource } from '@clerk/types';
 
 import { SIGN_UP_MODES } from '../../../core/constants';
 import type { RouteContextValue } from '../../router/RouteContext';
-import { completeSignUpFlow } from '../SignUp/util';
+import { lazyCompleteSignUpFlow } from './lazy-sign-up';
 
 type HandleCombinedFlowTransferProps = {
   identifierAttribute: 'emailAddress' | 'phoneNumber' | 'username';
@@ -65,7 +65,8 @@ export function handleCombinedFlowTransfer({
       .create({
         [identifierAttribute]: identifierValue,
       })
-      .then(res => {
+      .then(async res => {
+        const completeSignUpFlow = await lazyCompleteSignUpFlow();
         return completeSignUpFlow({
           signUp: res,
           verifyEmailPath: 'create/verify-email-address',

packages/clerk-js/src/ui/components/SignIn/lazy-sign-up.ts

@@ -0,0 +1,22 @@
+import { lazy } from 'react';
+
+const preloadSignUp = () => import(/* webpackChunkName: "signUp" */ '../SignUp');
+
+const LazySignUpVerifyPhone = lazy(() => preloadSignUp().then(m => ({ default: m.SignUpVerifyPhone })));
+const LazySignUpVerifyEmail = lazy(() => preloadSignUp().then(m => ({ default: m.SignUpVerifyEmail })));
+const LazySignUpStart = lazy(() => preloadSignUp().then(m => ({ default: m.SignUpStart })));
+const LazySignUpSSOCallback = lazy(() => preloadSignUp().then(m => ({ default: m.SignUpSSOCallback })));
+const LazySignUpContinue = lazy(() => preloadSignUp().then(m => ({ default: m.SignUpContinue })));
+
+const lazyCompleteSignUpFlow = () =>
+  import(/* webpackChunkName: "signUp" */ '../SignUp/util').then(m => m.completeSignUpFlow);
+
+export {
+  preloadSignUp,
+  LazySignUpVerifyPhone,
+  LazySignUpVerifyEmail,
+  LazySignUpStart,
+  LazySignUpSSOCallback,
+  LazySignUpContinue,
+  lazyCompleteSignUpFlow,
+};

packages/clerk-js/src/ui/components/SignUp/SignUp.tsx

@@ -117,3 +117,5 @@ export const SignUpModal = (props: SignUpModalProps): JSX.Element => {
     </Route>
   );
 };
+
+export { SignUpContinue, SignUpSSOCallback, SignUpStart, SignUpVerifyEmail, SignUpVerifyPhone };

packages/clerk-js/src/ui/hooks/useFetch.ts

@@ -103,7 +103,8 @@ export const useFetch = <K, T>(
 
   useEffect(() => {
     const fetcherMissing = !fetcherRef.current;
-    const isCacheStale = Date.now() - (getCache()?.cachedAt || 0) >= staleTime;
+    const isCacheStale =
+      typeof getCache()?.cachedAt === 'undefined' ? true : Date.now() - (getCache()?.cachedAt || 0) >= staleTime;
     const isRequestOnGoing = getCache()?.isValidating ?? false;
 
     if (fetcherMissing || !isCacheStale || isRequestOnGoing) {