From 9d4d1bb29f31c2f6373ef89b8924c6fcb5acdbaf Mon Sep 17 00:00:00 2001
From: bfmvsa <bfmvsa@gmail.com>
Date: Sat, 19 Jul 2025 17:45:22 +0200
Subject: [PATCH 1/6] Add loading & loading text params to the button
 component.

---
 client/src/components/ui/button.tsx | 38 ++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
index 8e435c3c8..29b201520 100644
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -38,20 +38,52 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  loading?: boolean;
+  loadingText?: string;
 }
 
+const LoadingSpinner = () => (
+  <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+  </svg>
+);
+
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading, loadingText = "Loading...", children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
+    
+    if (asChild) {
+      return (
+        <Comp
+          className={cn(buttonVariants({ variant, size, className }))}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </Comp>
+      );
+    }
+    
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
+        disabled={loading || props.disabled}
         ref={ref}
         {...props}
-      />
+      >
+        {loading ? (
+          <>
+            <LoadingSpinner />
+            {loadingText}
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
     );
   },
 );
 Button.displayName = "Button";
 
-export { Button };
+export { Button };
\ No newline at end of file

From 10039681bea4c2f1f133d924999875338194f5b1 Mon Sep 17 00:00:00 2001
From: bfmvsa <bfmvsa@gmail.com>
Date: Sat, 19 Jul 2025 17:46:15 +0200
Subject: [PATCH 2/6] Update the click handlers of the connect and reconect
 button to set loading state to buttons.

---
 client/src/components/Sidebar.tsx | 43 ++++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 938e5b5a3..ae05706be 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import React, { useState, useCallback } from "react";
 import {
   Play,
   ChevronDown,
@@ -100,8 +100,37 @@ const Sidebar = ({
   const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
   const [copiedServerEntry, setCopiedServerEntry] = useState(false);
   const [copiedServerFile, setCopiedServerFile] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
   const { toast } = useToast();
 
+  // Reset connecting state when connection status changes
+  React.useEffect(() => {
+    if (connectionStatus !== "disconnected") {
+      setIsConnecting(false);
+    }
+  }, [connectionStatus]);
+
+  // Wrapper for onConnect that manages loading state
+  const handleConnect = useCallback(async () => {
+    setIsConnecting(true);
+    try {
+      await onConnect();
+    } finally {
+      // The useEffect above will reset isConnecting when connectionStatus changes
+    }
+  }, [onConnect]);
+
+  // Wrapper for restart that manages loading state
+  const handleRestart = useCallback(async () => {
+    setIsConnecting(true);
+    try {
+      onDisconnect();
+      await onConnect();
+    } finally {
+      // The useEffect above will reset isConnecting when connectionStatus changes
+    }
+  }, [onConnect, onDisconnect]);
+
   // Reusable error reporter for copy actions
   const reportError = useCallback(
     (error: unknown) => {
@@ -625,10 +654,8 @@ const Sidebar = ({
               <div className="grid grid-cols-2 gap-4">
                 <Button
                   data-testid="connect-button"
-                  onClick={() => {
-                    onDisconnect();
-                    onConnect();
-                  }}
+                  onClick={handleRestart}
+                  loading={isConnecting}
                 >
                   <RotateCcw className="w-4 h-4 mr-2" />
                   {transportType === "stdio" ? "Restart" : "Reconnect"}
@@ -640,7 +667,11 @@ const Sidebar = ({
               </div>
             )}
             {connectionStatus !== "connected" && (
-              <Button className="w-full" onClick={onConnect}>
+              <Button 
+                className="w-full" 
+                onClick={handleConnect} 
+                loading={isConnecting}
+              >
                 <Play className="w-4 h-4 mr-2" />
                 Connect
               </Button>

From aee0965171be801eefc2f20c8bec6409d39b7f92 Mon Sep 17 00:00:00 2001
From: bfmvsa <bfmvsa@gmail.com>
Date: Sat, 19 Jul 2025 18:04:16 +0200
Subject: [PATCH 3/6] Prettier fixes

---
 client/src/components/Sidebar.tsx   |  6 ++---
 client/src/components/ui/button.tsx | 42 ++++++++++++++++++++++++-----
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index ae05706be..d6e53cc74 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -667,9 +667,9 @@ const Sidebar = ({
               </div>
             )}
             {connectionStatus !== "connected" && (
-              <Button 
-                className="w-full" 
-                onClick={handleConnect} 
+              <Button
+                className="w-full"
+                onClick={handleConnect}
                 loading={isConnecting}
               >
                 <Play className="w-4 h-4 mr-2" />
diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
index 29b201520..3221af6c4 100644
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -43,16 +43,44 @@ export interface ButtonProps
 }
 
 const LoadingSpinner = () => (
-  <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+  <svg
+    className="animate-spin -ml-1 mr-2 h-4 w-4 text-current"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    ></circle>
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
   </svg>
 );
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, loading, loadingText = "Loading...", children, ...props }, ref) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      loading,
+      loadingText = "Loading...",
+      children,
+      ...props
+    },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : "button";
-    
+
     if (asChild) {
       return (
         <Comp
@@ -64,7 +92,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         </Comp>
       );
     }
-    
+
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
@@ -86,4 +114,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button };
\ No newline at end of file
+export { Button };

From 0fac278e8825d7156d979c6dffc67082711a773f Mon Sep 17 00:00:00 2001
From: bfmvsa <bfmvsa@gmail.com>
Date: Sat, 19 Jul 2025 18:16:02 +0200
Subject: [PATCH 4/6] Simplify implementation of handleConnect and
 handleRestart methods

---
 client/src/components/Sidebar.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index d6e53cc74..6bf8bafcb 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -104,29 +104,33 @@ const Sidebar = ({
   const { toast } = useToast();
 
   // Reset connecting state when connection status changes
-  React.useEffect(() => {
-    if (connectionStatus !== "disconnected") {
-      setIsConnecting(false);
-    }
-  }, [connectionStatus]);
+  // React.useEffect(() => {
+  //   if (connectionStatus !== "disconnected") {
+  //     setIsConnecting(false);
+  //   }
+  // }, [connectionStatus]);
 
   // Wrapper for onConnect that manages loading state
   const handleConnect = useCallback(async () => {
-    setIsConnecting(true);
+    // setIsConnecting(true);
     try {
+      setIsConnecting(true);
       await onConnect();
     } finally {
+      setIsConnecting(false);
       // The useEffect above will reset isConnecting when connectionStatus changes
     }
   }, [onConnect]);
 
   // Wrapper for restart that manages loading state
   const handleRestart = useCallback(async () => {
-    setIsConnecting(true);
+    //setIsConnecting(true);
     try {
+      setIsConnecting(true);
       onDisconnect();
       await onConnect();
     } finally {
+      setIsConnecting(false);
       // The useEffect above will reset isConnecting when connectionStatus changes
     }
   }, [onConnect, onDisconnect]);

From 91da33d816658f6efc8ee60c205e9025af18884f Mon Sep 17 00:00:00 2001
From: bfmvsa <bfmvsa@gmail.com>
Date: Sat, 19 Jul 2025 18:22:21 +0200
Subject: [PATCH 5/6] Remove comments

---
 client/src/components/Sidebar.tsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 6bf8bafcb..a54e401d7 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import { useState, useCallback } from "react";
 import {
   Play,
   ChevronDown,
@@ -103,35 +103,24 @@ const Sidebar = ({
   const [isConnecting, setIsConnecting] = useState(false);
   const { toast } = useToast();
 
-  // Reset connecting state when connection status changes
-  // React.useEffect(() => {
-  //   if (connectionStatus !== "disconnected") {
-  //     setIsConnecting(false);
-  //   }
-  // }, [connectionStatus]);
-
   // Wrapper for onConnect that manages loading state
   const handleConnect = useCallback(async () => {
-    // setIsConnecting(true);
     try {
       setIsConnecting(true);
       await onConnect();
     } finally {
       setIsConnecting(false);
-      // The useEffect above will reset isConnecting when connectionStatus changes
     }
   }, [onConnect]);
 
   // Wrapper for restart that manages loading state
   const handleRestart = useCallback(async () => {
-    //setIsConnecting(true);
     try {
       setIsConnecting(true);
       onDisconnect();
       await onConnect();
     } finally {
       setIsConnecting(false);
-      // The useEffect above will reset isConnecting when connectionStatus changes
     }
   }, [onConnect, onDisconnect]);
 

From 3eea60322245c1166cdc3ad3c5fa26c293a64970 Mon Sep 17 00:00:00 2001
From: bfmvsa <bfmvsa@gmail.com>
Date: Tue, 5 Aug 2025 09:54:34 +0200
Subject: [PATCH 6/6] Set default button loading attribute value as false

---
 client/src/components/ui/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
index 3221af6c4..0a238681a 100644
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -72,7 +72,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       variant,
       size,
       asChild = false,
-      loading,
+      loading = false,
       loadingText = "Loading...",
       children,
       ...props