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 = ({ 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 = ({ onBack, onNext, isFormValid = true, + isLoading = false, showFooterLinks = true, }) => { const buttons = useMemo(() => { @@ -47,7 +49,7 @@ const CardFooter: React.FC = ({ label: 'Back', type: 'outline' as const, onClick: onBack, - disabled: false, + disabled: isLoading, loading: false, }); } @@ -56,12 +58,12 @@ const CardFooter: React.FC = ({ 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) {