fix(integration): show disconnect loader only on the affected row

This commit is contained in:
Philipinho
2026-08-10 03:43:45 +01:00
parent 9f279d191c
commit 9bd5ddee69
2 changed files with 9 additions and 4 deletions
@@ -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>
@@ -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}
/>
);
})}