Improve loading state on connection click

Author: LauraBeatris

packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import type { LocalizationKey } from '@/ui/customizables';
 import { descriptors, Flex, Grid, SimpleButton, Spinner, Text } from '@/ui/customizables';
 import { Card } from '@/ui/elements/Card';
@@ -8,7 +10,7 @@ import type { InternalTheme, PropsOfComponent } from '@/ui/styledSystem';
 type ChooseEnterpriseConnectionCardProps = {
   title: LocalizationKey;
   subtitle: LocalizationKey;
-  onClick: (id: string) => void;
+  onClick: (id: string) => Promise<void>;
   enterpriseConnections: Array<{ id: string; name: string }>;
 };
 
@@ -41,8 +43,7 @@ export const ChooseEnterpriseConnectionCard = ({
               key={id}
               id={id}
               label={name}
-              onClick={() => onClick(id)}
-              isLoading={card.isLoading}
+              onClick={onClick}
             />
           ))}
         </Grid>
@@ -53,15 +54,20 @@ export const ChooseEnterpriseConnectionCard = ({
   );
 };
 
-type ChooseEnterpriseConnectionButtonProps = PropsOfComponent<typeof SimpleButton> & {
+type ChooseEnterpriseConnectionButtonProps = Omit<PropsOfComponent<typeof SimpleButton>, 'onClick'> & {
   id: string;
   label?: string;
-  isLoading: boolean;
-  onClick: () => void;
+  onClick: (id: string) => Promise<void>;
 };
 
 const ChooseEnterpriseConnectionButton = (props: ChooseEnterpriseConnectionButtonProps): JSX.Element => {
-  const { isLoading, label, onClick, ...rest } = props;
+  const { label, onClick, ...rest } = props;
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = () => {
+    setIsLoading(true);
+    void onClick(props.id).catch(() => setIsLoading(false));
+  };
 
   return (
     <SimpleButton
@@ -70,7 +76,7 @@ const ChooseEnterpriseConnectionButton = (props: ChooseEnterpriseConnectionButto
       block
       isLoading={isLoading}
       hoverAsFocus
-      onClick={onClick}
+      onClick={handleClick}
       {...rest}
       sx={(theme: InternalTheme) => [
         {

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

@@ -67,7 +67,7 @@ const withEnterpriseConnectionsGuard = <P extends AvailableComponentProps>(Compo
       Component,
       () => !hasMultipleEnterpriseConnections(signIn.supportedFirstFactors),
       ({ clerk }) => signInCtx.signInUrl || clerk.buildSignInUrl(),
-      'There are no enterprise connections available to sign-in. Clerk is redirecting to the `signInUrl` URL instead.',
+      'There are no enterprise connections available to sign-in. Clerk is redirecting to the `signInUrl` instead.',
     )(props);
   };
 

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

@@ -21,7 +21,7 @@ const SignUpChooseEnterpriseConnectionInternal = () => {
     const redirectUrl = ctx.ssoCallbackUrl;
     const redirectUrlComplete = ctx.afterSignUpUrl || '/';
 
-    void signUp.authenticateWithRedirect({
+    return signUp.authenticateWithRedirect({
       strategy: 'enterprise_sso',
       redirectUrl,
       redirectUrlComplete,

packages/types/src/signIn.ts

@@ -79,12 +79,6 @@ export interface SignInResource extends ClerkResource {
   createEmailLinkFlow: () => CreateEmailLinkFlowReturn<SignInStartEmailLinkFlowParams, SignInResource>;
 
   validatePassword: (password: string, callbacks?: ValidatePasswordCallbacks) => void;
-
-  /**
-   * @experimental
-   */
-  __experimental_getEnterpriseConnections: () => Promise<SignInEnterpriseConnectionResource[]>;
-
   /**
    * @internal
    */
@@ -112,8 +106,3 @@ export interface SignInJSON extends ClerkResourceJSON {
   second_factor_verification: VerificationJSON | null;
   created_session_id: string | null;
 }
-
-export interface SignInEnterpriseConnectionResource {
-  id: string;
-  name: string;
-}