feat(elements): Add temporary useIsLoading hook

.changeset/hip-monkeys-boil.md

@@ -0,0 +1,2 @@
+---
+---

packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx

@@ -13,6 +13,7 @@ import {
 
 import { H1, H2, H3, HR as Hr, P } from '@/components/design';
 import { CustomField, CustomSubmit } from '@/components/form';
+import { Loading } from '@/components/loader';
 import { SignInDebug } from '@/components/sign-in-debug';
 
 export default function SignInPage() {
@@ -54,10 +55,12 @@ export default function SignInPage() {
             <Hr />
 
             <div className='flex gap-6 flex-col'>
-              <CustomField
-                label='Email'
-                name='identifier'
-              />
+              <Loading>
+                <CustomField
+                  label='Email'
+                  name='identifier'
+                />
+              </Loading>
 
               {/* <Hr />
 
@@ -79,48 +82,49 @@ export default function SignInPage() {
               Current Factor: <Factor first>First</Factor> | <Factor second>Second</Factor>
             </H2>
 
-            <Verification name='password'>
-              <CustomField
-                label='Password'
-                name='password'
-              />
-
-              <CustomSubmit>Sign In</CustomSubmit>
-            </Verification>
-
-            <Verification name='email_code'>
-              <CustomField
-                label='Email Code'
-                name='code'
-              />
-
-              <CustomSubmit>Sign In</CustomSubmit>
-            </Verification>
-
-            <Verification name='phone_code'>
-              <CustomField
-                label='Phone Code'
-                name='code'
-              />
-
-              <Submit className='px-4 py-2 b-1 bg-blue-950 bg-opacity-20 hover:bg-opacity-10 active:bg-opacity-5 rounded-md dark:bg-opacity-100 dark:hover:bg-opacity-80 dark:active:bg-opacity-50 transition'>
-                Sign In
-              </Submit>
-            </Verification>
-
-            <Verification name='reset_password_email_code'>
-              <H3>Verify your email</H3>
-
-              <P>Please check your email for a verification code...</P>
-
-              <Submit className='px-4 py-2 b-1 bg-blue-950 bg-opacity-20 hover:bg-opacity-10 active:bg-opacity-5 rounded-md dark:bg-opacity-100 dark:hover:bg-opacity-80 dark:active:bg-opacity-50 transition'>
-                Verify
-              </Submit>
-            </Verification>
+            <Loading>
+              <Verification name='password'>
+                <CustomField
+                  label='Password'
+                  name='password'
+                />
+
+                <CustomSubmit>Sign In</CustomSubmit>
+              </Verification>
+
+              <Verification name='email_code'>
+                <CustomField
+                  label='Email Code'
+                  name='code'
+                />
+
+                <CustomSubmit>Sign In</CustomSubmit>
+              </Verification>
+
+              <Verification name='phone_code'>
+                <CustomField
+                  label='Phone Code'
+                  name='code'
+                />
+
+                <Submit className='px-4 py-2 b-1 bg-blue-950 bg-opacity-20 hover:bg-opacity-10 active:bg-opacity-5 rounded-md dark:bg-opacity-100 dark:hover:bg-opacity-80 dark:active:bg-opacity-50 transition'>
+                  Sign In
+                </Submit>
+              </Verification>
+
+              <Verification name='reset_password_email_code'>
+                <H3>Verify your email</H3>
+
+                <P>Please check your email for a verification code...</P>
+
+                <Submit className='px-4 py-2 b-1 bg-blue-950 bg-opacity-20 hover:bg-opacity-10 active:bg-opacity-5 rounded-md dark:bg-opacity-100 dark:hover:bg-opacity-80 dark:active:bg-opacity-50 transition'>
+                  Verify
+                </Submit>
+              </Verification>
+            </Loading>
           </div>
         </Continue>
       </div>
-
       <SignInDebug />
     </SignIn>
   );

packages/elements/examples/nextjs/components/loader.tsx

@@ -0,0 +1,64 @@
+'use client';
+import { unstable_useIsLoading } from '@clerk/elements/sign-in';
+import { motion } from 'framer-motion';
+
+const colors = ['#22238f', '#6b45fa', '#ca3286', '#fe2b49', '#fe652d'];
+
+const containerVariants = {
+  initial: {},
+  animate: {
+    transition: {
+      when: 'beforeChildren',
+      staggerChildren: 0.1,
+    },
+  },
+};
+
+const dotVariants = {
+  initial: {},
+  animate: {
+    height: [20, 40, 20],
+    transition: {
+      repeat: Infinity,
+    },
+  },
+};
+
+const Loader = ({ count = 5 }) => {
+  return (
+    <motion.div
+      variants={containerVariants}
+      initial='initial'
+      animate='animate'
+      style={{
+        display: 'flex',
+        gap: 10,
+        height: 40,
+        alignItems: 'center',
+      }}
+    >
+      {Array(count)
+        .fill(null)
+        .map((_, index) => {
+          return (
+            <motion.div
+              key={index}
+              variants={dotVariants}
+              style={{
+                height: 20,
+                width: 20,
+                backgroundColor: colors[index % colors.length],
+                borderRadius: 20,
+              }}
+            />
+          );
+        })}
+    </motion.div>
+  );
+};
+
+export function Loading({ children }: { children: React.ReactNode }) {
+  const isLoading = unstable_useIsLoading();
+
+  return isLoading ? <Loader /> : children;
+}

packages/elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clerk/elements",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Clerk Elements",
   "keywords": [
     "clerk",

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

@@ -52,7 +52,7 @@ export interface SignInMachineInput {
   signUpPath: string;
 }
 
-export type SignInMachineTags = 'state:start' | 'state:first-factor' | 'state:second-factor' | 'external';
+export type SignInMachineTags = 'state:start' | 'state:first-factor' | 'state:second-factor' | 'external' | 'loading';
 
 export type SignInMachineEvents =
   | ErrorActorEvent
@@ -247,7 +247,7 @@ export const SignInMachine = setup({
     },
     Start: {
       id: 'Start',
-      tags: 'state:start',
+      tags: ['state:start'],
       description: 'The initial state of the sign-in flow.',
       initial: 'AwaitingInput',
       on: {
@@ -287,6 +287,7 @@ export const SignInMachine = setup({
           },
         },
         Attempting: {
+          tags: ['loading'],
           invoke: {
             id: 'createSignIn',
             src: 'createSignIn',
@@ -328,7 +329,7 @@ export const SignInMachine = setup({
           always: [
             {
               description: 'If the current factor is not password, prepare the factor',
-              guard: not('isCurrentFactorPassword'),
+              guard: and([not('isCurrentFactorPassword'), { type: 'isCurrentPath', params: { path: '/continue' } }]),
               target: 'Preparing',
             },
             {
@@ -338,6 +339,7 @@ export const SignInMachine = setup({
           ],
         },
         Preparing: {
+          tags: ['loading'],
           invoke: {
             id: 'prepareFirstFactor',
             src: 'prepareFirstFactor',
@@ -372,6 +374,7 @@ export const SignInMachine = setup({
           },
         },
         Attempting: {
+          tags: ['loading'],
           invoke: {
             id: 'attemptFirstFactor',
             src: 'attemptFirstFactor',
@@ -398,7 +401,7 @@ export const SignInMachine = setup({
       },
     },
     SecondFactor: {
-      tags: 'state:second-factor',
+      tags: ['state:second-factor'],
       initial: 'DeterminingState',
       entry: [{ type: 'navigateTo', params: { path: '/continue' } }, 'assignStartingSecondFactor'],
       onDone: [
@@ -412,7 +415,7 @@ export const SignInMachine = setup({
           always: [
             {
               description: 'If the current factor is not TOTP, prepare the factor',
-              guard: not('isCurrentFactorTOTP'),
+              guard: and([not('isCurrentFactorTOTP'), { type: 'isCurrentPath', params: { path: '/continue' } }]),
               target: 'Preparing',
               reenter: true,
             },
@@ -424,6 +427,7 @@ export const SignInMachine = setup({
           ],
         },
         Preparing: {
+          tags: ['loading'],
           invoke: {
             id: 'prepareSecondFactor',
             src: 'prepareSecondFactor',
@@ -451,6 +455,7 @@ export const SignInMachine = setup({
           },
         },
         Attempting: {
+          tags: ['loading'],
           invoke: {
             id: 'attemptSecondFactor',
             src: 'attemptSecondFactor',
@@ -481,6 +486,7 @@ export const SignInMachine = setup({
       },
     },
     AuthenticatingWithRedirect: {
+      tags: ['loading'],
       invoke: {
         id: 'authenticateWithSignInRedirect',
         src: 'authenticateWithSignInRedirect',
@@ -515,7 +521,7 @@ export const SignInMachine = setup({
       },
     },
     SSOCallback: {
-      tags: 'external',
+      tags: ['external'],
       initial: 'Attempting',
       on: {
         'CLERKJS.NAVIGATE.COMPLETE': '#SignIn.Complete',
@@ -555,6 +561,7 @@ export const SignInMachine = setup({
       },
       states: {
         Attempting: {
+          tags: ['loading'],
           invoke: {
             id: 'handleRedirectCallback',
             src: 'handleRedirectCallback',

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

@@ -0,0 +1,13 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useActiveTags } from '~/react/hooks/use-active-tags.hook';
+import { SignInCtx } from '~/react/sign-in/contexts/sign-in.context';
+
+/**
+ * Caution: This hook is unstable and may disappear in the future.
+ * This is a temporary hook until the actual loading API is explored and implemented.
+ */
+export const unstable_useIsLoading = () => {
+  const ref = SignInCtx.useActorRef();
+
+  return useActiveTags(ref, 'loading');
+};

packages/elements/src/react/sign-in/index.ts

@@ -11,6 +11,8 @@ export {
 export { SignInStart as Start } from './start';
 export { SignInFactor as Factor, SignInVerification as Verification } from './verifications';
 
+export { unstable_useIsLoading } from './hooks/use-loading.hook';
+
 /** @internal Internal use only */
 export const useSignInActorRef_internal = SignInCtx.useActorRef;