feat(elements,ui): Add support for loading actions

.changeset/small-bees-jog.md

@@ -0,0 +1,5 @@
+---
+"@clerk/elements": patch
+---
+
+Add support for submit and passkey loading scopes

packages/elements/src/internals/machines/shared/shared.actions.ts

@@ -42,6 +42,7 @@ export function sendToLoading({ context, event }: SendToLoadingProps): void {
   // Unrelated to the `context` of each machine, the step passed to the loading event must use BaseRouterLoadingStep
   let step: BaseRouterLoadingStep | undefined;
   let strategy: SignInStrategy | undefined;
+  let action: string | undefined;
 
   // By default the loading state is set to `true` when this function is called
   // Only if these events are received, the loading state is set to `false`
@@ -73,32 +74,50 @@ export function sendToLoading({ context, event }: SendToLoadingProps): void {
   } else if (context.loadingStep === 'continue') {
     step = 'continue';
     strategy = undefined;
+    action = 'action' in event ? event.action : undefined;
 
     return context.parent.send({
       type: 'LOADING',
       isLoading: true,
       step,
       strategy,
+      action,
     });
   } else if (context.loadingStep === 'reset-password') {
     step = 'reset-password';
     strategy = undefined;
+    action = 'action' in event ? event.action : undefined;
 
     return context.parent.send({
       type: 'LOADING',
       isLoading: true,
       step,
       strategy,
+      action,
+    });
+  } else if (context.loadingStep === 'start') {
+    step = 'start';
+    strategy = undefined;
+    action = 'action' in event ? event.action : undefined;
+
+    return context.parent.send({
+      type: 'LOADING',
+      isLoading: true,
+      step,
+      strategy,
+      action,
     });
   } else {
     step = context.loadingStep;
     strategy = undefined;
+    action = 'action' in event ? event.action : undefined;
 
     return context.parent.send({
       type: 'LOADING',
       isLoading: true,
       step,
       strategy,
+      action,
     });
   }
 }

packages/elements/src/internals/machines/sign-in/reset-password.types.ts

@@ -11,7 +11,7 @@ export type SignInResetPasswordTags = 'state:pending' | 'state:attempting' | 'st
 
 // ---------------------------------- Events ---------------------------------- //
 
-export type SignInResetPasswordSubmitEvent = { type: 'SUBMIT' };
+export type SignInResetPasswordSubmitEvent = { type: 'SUBMIT'; action: 'submit' };
 
 export type SignInResetPasswordEvents = ErrorActorEvent | SignInResetPasswordSubmitEvent;
 

packages/elements/src/internals/machines/sign-in/router.machine.ts

@@ -227,6 +227,7 @@ export const SignInRouterMachine = setup({
           isLoading: event.isLoading,
           step: event.step,
           strategy: event.strategy,
+          action: event.action,
         },
       })),
     },

packages/elements/src/internals/machines/sign-in/start.types.ts

@@ -12,8 +12,8 @@ export type SignInStartTags = 'state:pending' | 'state:attempting' | 'state:load
 
 // ---------------------------------- Events ---------------------------------- //
 
-export type SignInStartSubmitEvent = { type: 'SUBMIT' };
-export type SignInStartPasskeyEvent = { type: 'AUTHENTICATE.PASSKEY' };
+export type SignInStartSubmitEvent = { type: 'SUBMIT'; action: 'submit' };
+export type SignInStartPasskeyEvent = { type: 'AUTHENTICATE.PASSKEY'; action: 'passkey' };
 export type SignInStartPasskeyAutofillEvent = { type: 'AUTHENTICATE.PASSKEY.AUTOFILL' };
 export type SignInStartWeb3Event = { type: 'AUTHENTICATE.WEB3'; strategy: Web3Strategy };
 

packages/elements/src/internals/machines/sign-in/verification.types.ts

@@ -19,7 +19,7 @@ export type SignInVerificationTags =
 
 // ---------------------------------- Events ---------------------------------- //
 
-export type SignInVerificationSubmitEvent = { type: 'SUBMIT' };
+export type SignInVerificationSubmitEvent = { type: 'SUBMIT'; action: 'submit' };
 export type SignInVerificationFactorUpdateEvent = { type: 'STRATEGY.UPDATE'; factor: SignInFactor | undefined };
 export type SignInVerificationRetryEvent = { type: 'RETRY' };
 export type SignInVerificationStrategyRegisterEvent = { type: 'STRATEGY.REGISTER'; factor: SignInStrategyName };

packages/elements/src/internals/machines/sign-up/continue.types.ts

@@ -11,7 +11,7 @@ export type SignUpContinueTags = 'state:pending' | 'state:attempting' | 'state:l
 
 // ---------------------------------- Events ---------------------------------- //
 
-export type SignUpContinueSubmitEvent = { type: 'SUBMIT' };
+export type SignUpContinueSubmitEvent = { type: 'SUBMIT'; action: 'submit' };
 
 export type SignUpContinueEvents = ErrorActorEvent | SignUpContinueSubmitEvent;
 

packages/elements/src/internals/machines/sign-up/router.machine.ts

@@ -232,6 +232,7 @@ export const SignUpRouterMachine = setup({
           isLoading: event.isLoading,
           step: event.step,
           strategy: event.strategy,
+          action: event.action,
         },
       })),
     },

packages/elements/src/internals/machines/sign-up/start.types.ts

@@ -12,7 +12,7 @@ export type SignUpStartTags = 'state:pending' | 'state:attempting' | 'state:load
 
 // ---------------------------------- Events ---------------------------------- //
 
-export type SignUpStartSubmitEvent = { type: 'SUBMIT' };
+export type SignUpStartSubmitEvent = { type: 'SUBMIT'; action: 'submit' };
 
 // TODO: Consolidate with SignInStartMachine
 export type SignUpStartRedirectOauthEvent = { type: 'AUTHENTICATE.OAUTH'; strategy: OAuthStrategy };

packages/elements/src/internals/machines/sign-up/verification.types.ts

@@ -27,7 +27,7 @@ export type SignUpVerificationFriendlyTags = 'code' | 'email_link' | 'email_code
 
 // ---------------------------------- Events ---------------------------------- //
 
-export type SignUpVerificationSubmitEvent = { type: 'SUBMIT' };
+export type SignUpVerificationSubmitEvent = { type: 'SUBMIT'; action: 'submit' };
 export type SignUpVerificationNextEvent = { type: 'NEXT'; resource?: SignUpResource };
 export type SignUpVerificationRetryEvent = { type: 'RETRY' };
 

packages/elements/src/internals/machines/types/router.types.ts

@@ -35,10 +35,12 @@ export type BaseRouterLoadingEvent<TSteps extends BaseRouterLoadingStep> = (
   | {
       step: TSteps | undefined;
       strategy?: never;
+      action?: string;
     }
   | {
       step?: never;
       strategy: SignInStrategy | undefined;
+      action?: never;
     }
 ) & { type: 'LOADING'; isLoading: boolean };
 

packages/elements/src/react/common/form/form.tsx

@@ -11,7 +11,7 @@ const DISPLAY_NAME = 'ClerkElementsForm';
 type FormElement = React.ElementRef<typeof RadixForm>;
 export type FormProps = Omit<RadixFormProps, 'children'> & {
   children: React.ReactNode;
-  flowActor?: BaseActorRef<{ type: 'SUBMIT' }>;
+  flowActor?: BaseActorRef<{ type: 'SUBMIT'; action: 'submit' }>;
 };
 
 export const Form = React.forwardRef<FormElement, FormProps>(({ flowActor, onSubmit, ...rest }, forwardedRef) => {

packages/elements/src/react/common/form/hooks/use-form.ts

@@ -6,7 +6,7 @@ import { useGlobalErrors } from './use-global-errors';
 /**
  * Provides the form submission handler along with the form's validity via a data attribute
  */
-export function useForm({ flowActor }: { flowActor?: BaseActorRef<{ type: 'SUBMIT' }> }) {
+export function useForm({ flowActor }: { flowActor?: BaseActorRef<{ type: 'SUBMIT'; action: 'submit' }> }) {
   const { errors } = useGlobalErrors();
 
   // Register the onSubmit handler for form submission
@@ -15,7 +15,7 @@ export function useForm({ flowActor }: { flowActor?: BaseActorRef<{ type: 'SUBMI
     (event: React.FormEvent<Element>) => {
       event.preventDefault();
       if (flowActor) {
-        flowActor.send({ type: 'SUBMIT' });
+        flowActor.send({ type: 'SUBMIT', action: 'submit' });
       }
     },
     [flowActor],

packages/elements/src/react/common/loading.tsx

@@ -16,7 +16,13 @@ import { SIGN_UP_STEPS } from '~/react/sign-up/step';
 import { isProviderStrategyScope, mapScopeToStrategy } from '~/react/utils/map-scope-to-strategy';
 
 type Strategy = OAuthProvider | SamlStrategy | 'metamask';
-type LoadingScope<T extends TSignInStep | TSignUpStep> = 'global' | `step:${T}` | `provider:${Strategy}` | undefined;
+type LoadingScope<T extends TSignInStep | TSignUpStep> =
+  | 'global'
+  | `step:${T}`
+  | `provider:${Strategy}`
+  | 'submit'
+  | 'passkey'
+  | undefined;
 
 type LoadingProps = {
   scope?: LoadingScope<TSignInStep | TSignUpStep>;
@@ -134,7 +140,7 @@ type SignInLoadingProps = {
 };
 
 function SignInLoading({ children, scope, routerRef }: SignInLoadingProps) {
-  const [isLoading, { step: loadingStep, strategy }] = useLoading(routerRef);
+  const [isLoading, { step: loadingStep, strategy, action }] = useLoading(routerRef);
   const tags = useSelector(routerRef, s => s.tags);
 
   const isStepLoading = (step: TSignInStep) => isLoading && loadingStep === step;
@@ -150,7 +156,7 @@ function SignInLoading({ children, scope, routerRef }: SignInLoadingProps) {
     loadingResult = isLoading && loadingStep === undefined && strategy === mapScopeToStrategy(scope);
   } else if (scope) {
     // Specified Loading Scope
-    loadingResult = isStepLoading(scope.replace('step:', '') as TSignInStep);
+    loadingResult = isStepLoading(scope.replace('step:', '') as TSignInStep) || scope === action;
   } else {
     // Inferred Loading Scope
     loadingResult =
@@ -171,7 +177,7 @@ type SignUpLoadingProps = {
 };
 
 function SignUpLoading({ children, scope, routerRef }: SignUpLoadingProps) {
-  const [isLoading, { step: loadingStep, strategy }] = useLoading(routerRef);
+  const [isLoading, { step: loadingStep, strategy, action }] = useLoading(routerRef);
   const tags = useSelector(routerRef, s => s.tags);
 
   const isStepLoading = (step: TSignUpStep) => isLoading && loadingStep === step;
@@ -186,7 +192,7 @@ function SignUpLoading({ children, scope, routerRef }: SignUpLoadingProps) {
     // Provider-Specific Loading Scope
     loadingResult = isLoading && loadingStep === undefined && strategy === mapScopeToStrategy(scope);
   } else if (scope) {
-    loadingResult = isStepLoading(scope.replace('step:', '') as TSignUpStep);
+    loadingResult = isStepLoading(scope.replace('step:', '') as TSignUpStep) || scope === action;
   } else {
     // Inferred Loading Scope
     loadingResult =

packages/elements/src/react/hooks/use-loading.hook.ts

@@ -10,7 +10,7 @@ export type ActorSignUp = ActorRefFrom<TSignUpRouterMachine>;
 type LoadingContext<T> = T extends ActorSignIn ? SignInRouterLoadingContext : SignUpRouterLoadingContext;
 type UseLoadingReturn<T> = [
   isLoading: boolean,
-  { step: LoadingContext<T>['step']; strategy: LoadingContext<T>['strategy'] },
+  { step: LoadingContext<T>['step']; strategy: LoadingContext<T>['strategy']; action: LoadingContext<T>['action'] },
 ];
 
 const selectLoading = <T extends SnapshotFrom<TSignInRouterMachine> | SnapshotFrom<TSignUpRouterMachine>>(
@@ -33,8 +33,8 @@ export function useLoading<TActor extends ActorSignIn | ActorSignUp>(actor: TAct
   const loadingCtx = useSelector(actor, selectLoading, compareLoadingValue) as LoadingContext<TActor>;
 
   if (!loadingCtx) {
-    return [false, { step: undefined, strategy: undefined }];
+    return [false, { step: undefined, strategy: undefined, action: undefined }];
   }
 
-  return [loadingCtx.isLoading, { step: loadingCtx.step, strategy: loadingCtx.strategy }];
+  return [loadingCtx.isLoading, { step: loadingCtx.step, strategy: loadingCtx.strategy, action: loadingCtx.action }];
 }

packages/ui/src/components/sign-in/steps/reset-password.tsx

@@ -66,32 +66,32 @@ export function SignInResetPassword() {
                   </div>
                 </Card.Body>
 
-                <Common.Loading>
-                  {isSubmitting => {
-                    return (
-                      <Card.Actions>
+                <Card.Actions>
+                  <Common.Loading scope='submit'>
+                    {isSubmitting => {
+                      return (
                         <SignIn.Action
                           submit
                           asChild
                         >
                           <Button
                             busy={isSubmitting}
-                            disabled={isGlobalLoading || isSubmitting}
+                            disabled={isGlobalLoading}
                           >
                             {t('signIn.resetPassword.formButtonPrimary')}
                           </Button>
                         </SignIn.Action>
+                      );
+                    }}
+                  </Common.Loading>
 
-                        <SignIn.Action
-                          navigate='start'
-                          asChild
-                        >
-                          <LinkButton>{t('backButton')}</LinkButton>
-                        </SignIn.Action>
-                      </Card.Actions>
-                    );
-                  }}
-                </Common.Loading>
+                  <SignIn.Action
+                    navigate='start'
+                    asChild
+                  >
+                    <LinkButton>{t('backButton')}</LinkButton>
+                  </SignIn.Action>
+                </Card.Actions>
               </Card.Content>
               <Card.Footer {...cardFooterProps} />
             </Card.Root>

packages/ui/src/components/sign-in/steps/start.tsx

@@ -136,7 +136,7 @@ export function SignInStart() {
                   ) : null}
                 </Card.Body>
                 <Card.Actions>
-                  <Common.Loading>
+                  <Common.Loading scope='submit'>
                     {isSubmitting => {
                       return (
                         <SignIn.Action
@@ -162,13 +162,13 @@ export function SignInStart() {
                     // setState on click, but we'll need to find a way to clean
                     // up the state based on `isSubmitting`
                     passkeyEnabled ? (
-                      <Common.Loading>
+                      <Common.Loading scope='passkey'>
                         {isSubmitting => {
                           return (
                             <SignIn.Passkey asChild>
                               <LinkButton
                                 type='button'
-                                disabled={isGlobalLoading || isSubmitting}
+                                disabled={isGlobalLoading}
                               >
                                 {t('signIn.start.actionLink__use_passkey')}
                               </LinkButton>