refactor(elements): Fix loading oddities

.changeset/forty-kings-roll.md

@@ -0,0 +1,5 @@
+---
+"@clerk/elements": patch
+---
+
+Refactors sign-up loading logic to be in-line with sign-in

.changeset/tricky-hotels-smell.md

@@ -0,0 +1,5 @@
+---
+"@clerk/elements": patch
+---
+
+Fixes persistent loading states within the `forgot-password` step

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

@@ -309,7 +309,7 @@ export const SignInRouterMachine = setup({
       ],
     },
     Start: {
-      tags: 'route:start',
+      tags: ['step:start'],
       exit: 'clearFormErrors',
       invoke: {
         id: 'start',
@@ -358,7 +358,7 @@ export const SignInRouterMachine = setup({
       },
     },
     FirstFactor: {
-      tags: 'route:first-factor',
+      tags: ['step:first-factor', 'step:verifications'],
       invoke: {
         id: 'firstFactor',
         src: 'firstFactorMachine',
@@ -414,7 +414,7 @@ export const SignInRouterMachine = setup({
           },
         },
         ChoosingStrategy: {
-          tags: ['route:choose-strategy'],
+          tags: ['step:choose-strategy'],
           on: {
             'NAVIGATE.PREVIOUS': {
               description: 'Go to Idle, and also tell firstFactor to go to Pending',
@@ -424,15 +424,15 @@ export const SignInRouterMachine = setup({
           },
         },
         ForgotPassword: {
-          tags: ['route:forgot-password'],
+          tags: ['step:forgot-password'],
           on: {
             'NAVIGATE.PREVIOUS': 'Idle',
           },
         },
       },
     },
     SecondFactor: {
-      tags: 'route:second-factor',
+      tags: ['step:second-factor', 'step:verifications'],
       invoke: {
         id: 'secondFactor',
         src: 'secondFactorMachine',
@@ -478,7 +478,7 @@ export const SignInRouterMachine = setup({
           },
         },
         ChoosingStrategy: {
-          tags: ['route:choose-strategy'],
+          tags: ['step:choose-strategy'],
           on: {
             'NAVIGATE.PREVIOUS': {
               description: 'Go to Idle, and also tell firstFactor to go to Pending',
@@ -490,7 +490,7 @@ export const SignInRouterMachine = setup({
       },
     },
     ResetPassword: {
-      tags: 'route:reset-password',
+      tags: ['step:reset-password'],
       invoke: {
         id: 'resetPassword',
         src: 'resetPasswordMachine',
@@ -526,7 +526,7 @@ export const SignInRouterMachine = setup({
       },
     },
     Callback: {
-      tags: 'route:callback',
+      tags: ['step:callback'],
       entry: sendTo(ThirdPartyMachineId, { type: 'CALLBACK' }),
       on: {
         NEXT: [
@@ -562,7 +562,7 @@ export const SignInRouterMachine = setup({
       },
     },
     Error: {
-      tags: 'route:error',
+      tags: ['step:error'],
       on: {
         NEXT: {
           target: 'Start',

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

@@ -22,19 +22,20 @@ import type { SignInVerificationFactorUpdateEvent } from './verification.types';
 
 // ---------------------------------- Tags ---------------------------------- //
 
-export const SignInRouterRoutes = {
-  start: 'route:start',
-  firstFactor: 'route:first-factor',
-  secondFactor: 'route:second-factor',
-  callback: 'route:callback',
-  error: 'route:error',
-  forgotPassword: 'route:forgot-password',
-  resetPassword: 'route:reset-password',
-  chooseStrategy: 'route:choose-strategy',
+export const SignInRouterSteps = {
+  start: 'step:start',
+  verifications: 'step:verifications',
+  firstFactor: 'step:first-factor',
+  secondFactor: 'step:second-factor',
+  callback: 'step:callback',
+  error: 'step:error',
+  forgotPassword: 'step:forgot-password',
+  resetPassword: 'step:reset-password',
+  chooseStrategy: 'step:choose-strategy',
 } as const;
 
-export type SignInRouterRoutes = keyof typeof SignInRouterRoutes;
-export type SignInRouterTags = (typeof SignInRouterRoutes)[keyof typeof SignInRouterRoutes];
+export type SignInRouterSteps = keyof typeof SignInRouterSteps;
+export type SignInRouterTags = (typeof SignInRouterSteps)[keyof typeof SignInRouterSteps];
 
 // ---------------------------------- Children ---------------------------------- //
 
@@ -60,7 +61,9 @@ export type SignInRouterTransferEvent = BaseRouterTransferEvent;
 export type SignInRouterRedirectEvent = BaseRouterRedirectEvent;
 export type SignInRouterResetEvent = BaseRouterResetEvent;
 export type SignInRouterResetStepEvent = BaseRouterResetStepEvent;
-export type SignInRouterLoadingEvent = BaseRouterLoadingEvent<'start' | 'verifications' | 'reset-password'>;
+export type SignInRouterLoadingEvent = BaseRouterLoadingEvent<
+  'start' | 'verifications' | 'reset-password' | 'forgot-password' | 'choose-strategy'
+>;
 export type SignInRouterSetClerkEvent = BaseRouterSetClerkEvent;
 export type SignInRouterSubmitEvent = { type: 'SUBMIT' };
 export type SignInRouterPasskeyEvent = { type: 'AUTHENTICATE.PASSKEY' };

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

@@ -284,7 +284,7 @@ export const SignUpRouterMachine = setup({
       ],
     },
     Start: {
-      tags: 'route:start',
+      tags: ['step:start'],
       exit: 'clearFormErrors',
       invoke: {
         id: 'start',
@@ -322,7 +322,7 @@ export const SignUpRouterMachine = setup({
       },
     },
     Continue: {
-      tags: 'route:continue',
+      tags: ['step:continue'],
       invoke: {
         id: 'continue',
         src: 'continueMachine',
@@ -354,7 +354,7 @@ export const SignUpRouterMachine = setup({
       },
     },
     Verification: {
-      tags: 'route:verification',
+      tags: ['step:verification'],
       invoke: {
         id: 'verification',
         src: 'verificationMachine',
@@ -406,7 +406,7 @@ export const SignUpRouterMachine = setup({
       },
     },
     Callback: {
-      tags: 'route:callback',
+      tags: ['step:callback'],
       entry: sendTo(ThirdPartyMachineId, { type: 'CALLBACK' }),
       on: {
         NEXT: [
@@ -437,7 +437,7 @@ export const SignUpRouterMachine = setup({
       },
     },
     Error: {
-      tags: 'route:error',
+      tags: ['step:error'],
       on: {
         NEXT: {
           target: 'Start',

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

@@ -20,16 +20,16 @@ import type {
 
 // ---------------------------------- Tags ---------------------------------- //
 
-export const SignUpRouterRoutes = {
-  start: 'route:start',
-  continue: 'route:continue',
-  verification: 'route:verification',
-  callback: 'route:callback',
-  error: 'route:error',
+export const SignUpRouterSteps = {
+  start: 'step:start',
+  continue: 'step:continue',
+  verification: 'step:verification',
+  callback: 'step:callback',
+  error: 'step:error',
 } as const;
 
-export type SignUpRouterRoutes = keyof typeof SignUpRouterRoutes;
-export type SignUpRouterTags = (typeof SignUpRouterRoutes)[keyof typeof SignUpRouterRoutes];
+export type SignUpRouterSteps = keyof typeof SignUpRouterSteps;
+export type SignUpRouterTags = (typeof SignUpRouterSteps)[keyof typeof SignUpRouterSteps];
 
 // ---------------------------------- Children ---------------------------------- //
 

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

@@ -14,7 +14,14 @@ import type { ClerkRouter } from '~/react/router';
 
 // ---------------------------------- Events ---------------------------------- //
 
-export type BaseRouterLoadingStep = 'start' | 'verifications' | 'continue' | 'reset-password';
+export type BaseRouterLoadingStep =
+  | 'start'
+  | 'verifications'
+  | 'continue'
+  | 'reset-password'
+  | 'forgot-password'
+  | 'choose-strategy'
+  | 'error';
 
 export type BaseRouterNextEvent<T extends ClerkResource> = { type: 'NEXT'; resource?: T };
 export type BaseRouterFormAttachEvent = { type: 'FORM.ATTACH'; formRef: ActorRefFrom<TFormMachine> };