From 8bfc18ae27e3b3a34f9b6feef4c1acfa486fc58a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20De=20Freitas?=
 <6485562+adefreitas@users.noreply.github.com>
Date: Wed, 6 May 2026 17:24:08 +0100
Subject: [PATCH] fix(ENG-253): disable connect button while connector is
 loading

Prevents users from triggering handleConnect against incomplete
connectorData by disabling the Connect button (and showing a spinner)
while the connector config query is in flight.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/modules/integration-picker/IntegrationPicker.tsx   |  1 +
 .../integration-picker/components/cardFooter.tsx       | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/modules/integration-picker/IntegrationPicker.tsx b/src/modules/integration-picker/IntegrationPicker.tsx
index 15c9d1f..0f4a945 100644
--- a/src/modules/integration-picker/IntegrationPicker.tsx
+++ b/src/modules/integration-picker/IntegrationPicker.tsx
@@ -108,6 +108,7 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
                         onBack={accountData || hasOnlyOneIntegration ? undefined : onBack}
                         onNext={handleConnect}
                         isFormValid={isFormValid}
+                        isLoading={isLoading}
                         showFooterLinks={showFooterLinks}
                     />
                 )
diff --git a/src/modules/integration-picker/components/cardFooter.tsx b/src/modules/integration-picker/components/cardFooter.tsx
index d735cce..f8c9d72 100644
--- a/src/modules/integration-picker/components/cardFooter.tsx
+++ b/src/modules/integration-picker/components/cardFooter.tsx
@@ -17,6 +17,7 @@ interface CardFooterProps {
     onBack?: () => void;
     onNext: () => void;
     isFormValid?: boolean;
+    isLoading?: boolean;
     showFooterLinks?: boolean;
 }
 
@@ -27,6 +28,7 @@ const CardFooter: React.FC<CardFooterProps> = ({
     onBack,
     onNext,
     isFormValid = true,
+    isLoading = false,
     showFooterLinks = true,
 }) => {
     const buttons = useMemo(() => {
@@ -47,7 +49,7 @@ const CardFooter: React.FC<CardFooterProps> = ({
                 label: 'Back',
                 type: 'outline' as const,
                 onClick: onBack,
-                disabled: false,
+                disabled: isLoading,
                 loading: false,
             });
         }
@@ -56,12 +58,12 @@ const CardFooter: React.FC<CardFooterProps> = ({
             label: 'Connect',
             type: 'filled' as const,
             onClick: onNext,
-            disabled: !isFormValid,
-            loading: false,
+            disabled: !isFormValid || isLoading,
+            loading: isLoading,
         });
 
         return buttons;
-    }, [selectedIntegration, onBack, onNext, showActions, isFormValid]);
+    }, [selectedIntegration, onBack, onNext, showActions, isFormValid, isLoading]);
 
     if (buttons.length === 0) {
         if (!showFooterLinks) {