refactor: wrap tunnel connect/disconnect operations in spawn_blocking and add pending state UI feedback

Move tunnel_manager::connect and disconnect calls into spawn_blocking tasks to prevent blocking async runtime. Clone app handle and profile path before spawning. Add map_err for task join failures.

Add tunnelActionPending state to track in-progress tunnel operations. Pass busy prop to AppHeader and disable sync/logout/connect buttons during tunnel actions. Update connect button text to show "

desktop-client/src-tauri/src/lib.rs

@@ -393,20 +393,31 @@ async fn select_access_profile(app: AppHandle, profile_id: String) -> Result<Enr
 #[tauri::command]
 async fn connect_tunnel(app: AppHandle) -> Result<EnrollmentResult, String> {
     let session_state = sync_current_session(&app).await?;
-    let result = tunnel_manager::connect(&app, std::path::Path::new(&session_state.profile_path));
+    let app_handle = app.clone();
+    let profile_path = session_state.profile_path.clone();
+    let result = tauri::async_runtime::spawn_blocking(move || {
+        tunnel_manager::connect(&app_handle, std::path::Path::new(&profile_path))
+    })
+    .await
+    .map_err(|err| format!("Unable to join tunnel connect task: {err}"))?;
     refresh_tray_menu(&app);
     result?;
     Ok(session_state.enrollment)
 }
 
 #[tauri::command]
-fn disconnect_tunnel(app: AppHandle, state: State<'_, AppState>) -> Result<(), String> {
+async fn disconnect_tunnel(app: AppHandle, state: State<'_, AppState>) -> Result<(), String> {
     let profile_path = {
         let session = state.session.lock().map_err(|_| "Unable to read client state".to_string())?;
         let session = session.as_ref().ok_or_else(|| "No active session is available".to_string())?;
         session.profile_path.clone()
     };
-    let result = tunnel_manager::disconnect(&app, std::path::Path::new(&profile_path));
+    let app_handle = app.clone();
+    let result = tauri::async_runtime::spawn_blocking(move || {
+        tunnel_manager::disconnect(&app_handle, std::path::Path::new(&profile_path))
+    })
+    .await
+    .map_err(|err| format!("Unable to join tunnel disconnect task: {err}"))?;
     refresh_tray_menu(&app);
     result
 }

desktop-client/src/App.tsx

@@ -69,6 +69,7 @@ export function App() {
   const [loading, setLoading] = useState(false);
   const [syncing, setSyncing] = useState(false);
   const [selectingProfile, setSelectingProfile] = useState(false);
+  const [tunnelActionPending, setTunnelActionPending] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [connected, setConnected] = useState(false);
   const [state, setState] = useState<EnrollmentState | null>(null);
@@ -187,6 +188,7 @@ export function App() {
 
   async function toggleConnection() {
     const command = connected ? "disconnect_tunnel" : "connect_tunnel";
+    setTunnelActionPending(true);
     try {
       if (!connected) {
         const syncedState = await invoke<EnrollmentState>("connect_tunnel");
@@ -213,6 +215,8 @@ export function App() {
         }
       }
       setError(formatInvokeError(err, "Tunnel action failed"));
+    } finally {
+      setTunnelActionPending(false);
     }
   }
 
@@ -231,6 +235,7 @@ export function App() {
     <div className="client-shell">
       <div className="app-shell">
         <AppHeader
+          busy={tunnelActionPending}
           connected={connected}
           enrolled={Boolean(state)}
           onLogout={resetEnrollment}
@@ -290,7 +295,7 @@ export function App() {
             profiles={state?.availableProfiles ?? []}
             resources={state?.resources ?? []}
             selectedProfileId={state?.selectedProfileId ?? null}
-            selectingProfile={selectingProfile}
+            selectingProfile={selectingProfile || tunnelActionPending}
           />
         </div>
       </div>

desktop-client/src/components/AppHeader.tsx

@@ -1,6 +1,7 @@
 import { ActionButton } from "./ActionButton";
 
 type AppHeaderProps = {
+  busy: boolean;
   enrolled: boolean;
   connected: boolean;
   syncing: boolean;
@@ -10,6 +11,7 @@ type AppHeaderProps = {
 };
 
 export function AppHeader({
+  busy,
   enrolled,
   connected,
   syncing,
@@ -36,10 +38,10 @@ export function AppHeader({
         <div className="header-actions-secondary">
           {enrolled ? (
             <>
-              <ActionButton disabled={syncing} onClick={onSync} variant="secondary">
+              <ActionButton disabled={busy || syncing} onClick={onSync} variant="secondary">
                 {syncing ? "Syncing..." : "Sync"}
               </ActionButton>
-              <ActionButton onClick={onLogout} variant="ghost">
+              <ActionButton disabled={busy || syncing} onClick={onLogout} variant="ghost">
                 Logout
               </ActionButton>
             </>
@@ -47,11 +49,11 @@ export function AppHeader({
         </div>
         <div className="header-actions-primary">
           <ActionButton
-            disabled={!enrolled}
+            disabled={!enrolled || busy || syncing}
             onClick={onToggleConnection}
             variant={connected ? "danger" : "primary"}
           >
-            {!enrolled ? "Provision first" : connected ? "Disconnect" : "Connect"}
+            {!enrolled ? "Provision first" : busy ? connected ? "Disconnecting..." : "Connecting..." : connected ? "Disconnect" : "Connect"}
           </ActionButton>
         </div>
       </div>