From 9bd5ddee6949b5a5c2c41abfa94f858462ca09a3 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 10 Aug 2026 03:43:45 +0100
Subject: [PATCH] fix(integration): show disconnect loader only on the affected
 row

---
 .../src/features/integration/components/connection-row.tsx | 6 +++---
 apps/client/src/features/integration/pages/connections.tsx | 7 ++++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/features/integration/components/connection-row.tsx b/apps/client/src/features/integration/components/connection-row.tsx
index 274c35af1..9105588b6 100644
--- a/apps/client/src/features/integration/components/connection-row.tsx
+++ b/apps/client/src/features/integration/components/connection-row.tsx
@@ -8,7 +8,7 @@ type ConnectionRowProps = {
   connection?: UserConnection;
   onConnect: (type: string) => void;
   onDisconnect: (integrationId: string) => void;
-  isDisconnecting?: boolean;
+  disconnectingId?: string;
 };
 
 export default function ConnectionRow({
@@ -16,7 +16,7 @@ export default function ConnectionRow({
   connection,
   onConnect,
   onDisconnect,
-  isDisconnecting,
+  disconnectingId,
 }: ConnectionRowProps) {
   const { t } = useTranslation();
   const isWorkspaceScoped = definition.oauth?.connectionScope === 'workspace';
@@ -85,7 +85,7 @@ export default function ConnectionRow({
                     variant="subtle"
                     color="red"
                     onClick={() => onDisconnect(connection.integrationId)}
-                    loading={isDisconnecting}
+                    loading={disconnectingId === connection.integrationId}
                   >
                     {t("Disconnect")}
                   </Button>
diff --git a/apps/client/src/features/integration/pages/connections.tsx b/apps/client/src/features/integration/pages/connections.tsx
index 42beb8ff4..115b0cd7f 100644
--- a/apps/client/src/features/integration/pages/connections.tsx
+++ b/apps/client/src/features/integration/pages/connections.tsx
@@ -48,6 +48,11 @@ export default function Connections() {
     disconnectMutation.mutate({ integrationId });
   };
 
+  // Only the row being disconnected shows a loader; isPending alone is shared by every row.
+  const disconnectingId = disconnectMutation.isPending
+    ? disconnectMutation.variables?.integrationId
+    : undefined;
+
   const error = new URLSearchParams(window.location.search).get("error");
 
   return (
@@ -95,7 +100,7 @@ export default function Connections() {
                   connection={connection}
                   onConnect={handleConnect}
                   onDisconnect={handleDisconnect}
-                  isDisconnecting={disconnectMutation.isPending}
+                  disconnectingId={disconnectingId}
                 />
               );
             })}