Block connect button

new-ui/biome.json

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "$schema": "https://biomejs.dev/schemas/2.5.7/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.5.8/schema.json",
   "vcs": {
     "enabled": false,
     "clientKind": "git",

new-ui/package.json

@@ -17,9 +17,9 @@
     "@floating-ui/react": "^0.27.20",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",
-    "@tanstack/react-form": "^1.33.4",
+    "@tanstack/react-form": "^1.33.5",
     "@tanstack/react-query": "^5.101.4",
-    "@tanstack/react-router": "^1.170.25",
+    "@tanstack/react-router": "^1.170.29",
     "@tauri-apps/api": "^2.11.1",
     "@tauri-apps/plugin-clipboard-manager": "^2.3.2",
     "@tauri-apps/plugin-dialog": "^2.7.2",
@@ -32,7 +32,7 @@
     "byte-size": "^9.0.1",
     "chart.js": "^4.5.1",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.21",
+    "dayjs": "^1.11.23",
     "motion": "^12.43.0",
     "p-timeout": "^7.0.1",
     "prettier": "^3.9.6",
@@ -49,18 +49,18 @@
     "rxjs": "^7.8.2",
     "sass": "^1.102.0",
     "zod": "^4.4.3",
-    "zustand": "^5.0.14"
+    "zustand": "^5.0.15"
   },
   "devDependencies": {
     "@tanstack/devtools-vite": "^0.8.3",
-    "@tanstack/router-plugin": "^1.168.29",
+    "@tanstack/router-plugin": "^1.168.32",
     "@types/byte-size": "^8.1.2",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
     "@vitejs/plugin-react": "^6.0.5",
     "autoprefixer": "^10.5.4",
-    "globals": "^17.9.0",
+    "globals": "^17.11.0",
     "stylelint": "^17.14.1",
     "stylelint-config-standard-scss": "^17.0.0",
     "stylelint-scss": "^7.2.0",

new-ui/src/shared/components/LocationCard/components/ConnectButton/ConnectButton.tsx

@@ -4,14 +4,17 @@ import clsx from 'clsx';
 interface Props {
   active: boolean;
   onClick: () => void;
+  disabled?: boolean;
 }
 
-export const ConnectButton = ({ active, onClick }: Props) => (
+export const ConnectButton = ({ active, onClick, disabled = false }: Props) => (
   <button
+    type="button"
     className={clsx('connect-button', {
       connected: active,
       disconnected: !active,
     })}
+    disabled={disabled}
     onClick={onClick}
   >
     <p>{active ? 'Disconnect' : 'Connect VPN'}</p>

new-ui/src/shared/components/LocationCard/components/ConnectButton/style.scss

@@ -36,6 +36,15 @@
     }
   }
 
+  &:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    --bg: var(--bg-white-20);
+    --color: var(--fg-white-40);
+    --border: var(--bg);
+  }
+
   p {
     font: var(--t-body-sm-600);
     color: inherit;

new-ui/src/shared/components/LocationCard/components/LocationCardConnectButton.tsx

@@ -9,7 +9,7 @@ import { ConnectButton } from './ConnectButton/ConnectButton';
 export const LocationCardConnectButton = () => {
   const { location, setPostureError, setView, startMfa } = useLocationCardContext();
 
-  const { mutate: connect } = useMutation({
+  const { mutate: connect, isPending: isConnecting } = useMutation({
     mutationFn: api.connect,
     onSuccess: () => {
       setView(LocationCardViews.Connected);
@@ -32,7 +32,7 @@ export const LocationCardConnectButton = () => {
     },
   });
 
-  const { mutate: disconnect } = useMutation({
+  const { mutate: disconnect, isPending: isDisconnecting } = useMutation({
     mutationFn: api.disconnect,
     onSuccess: () => {
       setView(LocationCardViews.Default);
@@ -42,6 +42,8 @@ export const LocationCardConnectButton = () => {
     },
   });
 
+  const isBusy = isConnecting || isDisconnecting;
+
   const handleClick = () => {
     if (location.active) {
       disconnect({
@@ -58,5 +60,7 @@ export const LocationCardConnectButton = () => {
     }
   };
 
-  return <ConnectButton active={location.active} onClick={handleClick} />;
+  return (
+    <ConnectButton active={location.active} onClick={handleClick} disabled={isBusy} />
+  );
 };

new-ui/src/shared/components/OverviewLocationCard/OverviewLocationCard.tsx

@@ -40,7 +40,7 @@ export const OverviewLocationCard = ({ location, instance }: Props) => {
     },
   });
 
-  const { mutate: connect } = useMutation({
+  const { mutate: connect, isPending: isConnecting } = useMutation({
     mutationFn: api.connect,
     onError: (err) => {
       const connectError = parseConnectError(err);
@@ -65,7 +65,7 @@ export const OverviewLocationCard = ({ location, instance }: Props) => {
     },
   });
 
-  const { mutate: disconnect } = useMutation({
+  const { mutate: disconnect, isPending: isDisconnecting } = useMutation({
     mutationFn: api.disconnect,
     meta: {
       invalidate: [
@@ -77,6 +77,8 @@ export const OverviewLocationCard = ({ location, instance }: Props) => {
     },
   });
 
+  const isBusy = isConnecting || isDisconnecting;
+
   const handleConnectClick = () => {
     if (!appConfig) return;
     if (location.active) {
@@ -122,7 +124,11 @@ export const OverviewLocationCard = ({ location, instance }: Props) => {
           }
         />
         <div className="right">
-          <ConnectButton active={location.active} onClick={handleConnectClick} />
+          <ConnectButton
+            active={location.active}
+            onClick={handleConnectClick}
+            disabled={isBusy}
+          />
         </div>
       </div>
       <Divider spacing={ThemeSpacing.Lg} />

nix/package.nix

@@ -90,7 +90,7 @@
     inherit version pnpm;
     src = ../new-ui;
     fetcherVersion = 4;
-    hash = "sha256-VJwrc7TtuwwLWyQw2VaVZdb868JR0rLVLSs8qwn1LdQ=";
+    hash = "sha256-Ka76Vy52+5ZpHAc7EEFXjJJVc1dTuIH4HBvrzU0CPW0=";
   };
 
   # Pre-build the new UI frontend so Tauri can serve it as WebviewUrl::App("compact/") and "full/".