feat: add spinner while ssh operations are happening

Author: ellie

crates/atuin-desktop-runtime/src/blocks/script.rs

@@ -748,7 +748,9 @@ impl Script {
             let error_msg = format!("Failed to start SSH execution: {}", e);
             let _ = context.block_failed(error_msg.to_string()).await;
             if let Some(ref path) = remote_temp_path {
-                let _ = ssh_pool.delete_file(&hostname, username.as_deref(), path).await;
+                let _ = ssh_pool
+                    .delete_file(&hostname, username.as_deref(), path)
+                    .await;
             }
             return (Err(error_msg.into()), Vec::new(), None);
         }

crates/atuin-desktop-runtime/src/blocks/terminal.rs

@@ -249,10 +249,9 @@ impl Terminal {
             }
         } else {
             if uses_output_vars {
-                fs_var_handle =
-                    Some(crate::context::fs_var::setup().map_err(|e| {
-                        format!("Failed to setup temp file for output variables: {}", e)
-                    })?);
+                fs_var_handle = Some(crate::context::fs_var::setup().map_err(|e| {
+                    format!("Failed to setup temp file for output variables: {}", e)
+                })?);
             } else {
                 fs_var_handle = None;
             }

src/components/runbooks/editor/blocks/Script/Script.tsx

@@ -128,6 +128,8 @@ const ScriptBlock = ({
   const blockContext = useBlockContext(script.id);
   const sshParent = blockContext.sshHost;
 
+  const showSpinner = (blockExecution.isStarting || blockExecution.isStopping) && !!sshParent;
+
   const onBlockOutput = useCallback(async (output: GenericBlockOutput<void>) => {
     if (output.stdout) {
       xtermRef.current?.write(output.stdout);
@@ -355,14 +357,16 @@ const ScriptBlock = ({
               color="danger"
             >
               <div>
-                <PlayButton
-                  eventName="runbooks.block.execute"
-                  eventProps={{ type: "script" }}
-                  onPlay={handlePlay}
-                  onStop={blockExecution.cancel}
-                  isRunning={blockExecution.isRunning}
-                  cancellable={true}
-                />
+              <PlayButton
+                eventName="runbooks.block.execute"
+                eventProps={{ type: "script" }}
+                onPlay={handlePlay}
+                onStop={blockExecution.cancel}
+                isRunning={blockExecution.isRunning}
+                cancellable={true}
+                isLoading={showSpinner}
+                disabled={showSpinner}
+              />
               </div>
             </Tooltip>
 

src/lib/blocks/terminal/component.tsx

@@ -328,7 +328,8 @@ export const RunBlock = ({
 
           <div className="flex flex-row gap-2 flex-grow w-full" ref={elementRef}>
             <PlayButton
-              isLoading={isLoading}
+              isLoading={isLoading || ((execution.isStarting || execution.isStopping) && !!sshParent)}
+              disabled={isLoading || ((execution.isStarting || execution.isStopping) && !!sshParent)}
               isRunning={execution.isRunning}
               cancellable={true}
               onPlay={handlePlay}

src/lib/hooks/useDocumentBridge.ts

@@ -137,6 +137,7 @@ export function useBlockContext(blockId: string, suppressErrors: boolean = false
 export function useBlockOutput<T = JsonValue>(
   blockId: string,
   callback: (output: GenericBlockOutput<T>) => void,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): void {
   const documentBridge = useDocumentBridge();
   useEffect(() => {
@@ -175,6 +176,8 @@ export type ExecutionLifecycle = "idle" | "running" | "success" | "error" | "can
 
 export interface ClientExecutionHandle {
   isRunning: boolean;
+  isStarting: boolean;
+  isStopping: boolean;
   isSuccess: boolean;
   isError: boolean;
   isCancelled: boolean;
@@ -192,6 +195,8 @@ export function useBlockExecution(blockId: string): ClientExecutionHandle {
   const [lifecycle, setLifecycle] = useState<ExecutionLifecycle>("idle");
   const [error, setError] = useState<string | null>(null);
   const [executionId, setExecutionId] = useState<string | null>(null);
+  const [isStarting, setIsStarting] = useState(false);
+  const [isStopping, setIsStopping] = useState(false);
 
   const startExecution = useCallback(async () => {
     if (!documentBridge) {
@@ -203,6 +208,7 @@ export function useBlockExecution(blockId: string): ClientExecutionHandle {
       return;
     }
 
+    setIsStarting(true);
     setError(null);
     documentBridge.logger.info(
       `Starting execution of block ${blockId} in runbook ${documentBridge.runbookId}`,
@@ -212,6 +218,7 @@ export function useBlockExecution(blockId: string): ClientExecutionHandle {
     try {
       executionId = await executeBlock(documentBridge.runbookId, blockId);
     } catch (error) {
+      setIsStarting(false);
       documentBridge.logger.warn(
         `Failed to execute block ${blockId} in runbook ${documentBridge.runbookId} (block should send a BlockOutput with lifecycle set to error)`,
         error,
@@ -248,10 +255,16 @@ export function useBlockExecution(blockId: string): ClientExecutionHandle {
       return;
     }
 
+    setIsStopping(true);
     documentBridge.logger.info(
       `Cancelling execution of block ${blockId} in runbook ${documentBridge.runbookId} with execution ID: ${executionId}`,
     );
-    await cancelExecution(executionId);
+    try {
+      await cancelExecution(executionId);
+    } catch (error) {
+      setIsStopping(false);
+      documentBridge.logger.error("Failed to cancel execution", error);
+    }
     setExecutionId(null);
     setError(null);
   }, [documentBridge, blockId, executionId, lifecycle]);
@@ -262,19 +275,26 @@ export function useBlockExecution(blockId: string): ClientExecutionHandle {
         setLifecycle("success");
         setExecutionId(null);
         setError(null);
+        setIsStarting(false);
+        setIsStopping(false);
         break;
       case "cancelled":
         setLifecycle("cancelled");
         setExecutionId(null);
         setError(null);
+        setIsStarting(false);
+        setIsStopping(false);
         break;
       case "error":
         setLifecycle("error");
         setExecutionId(null);
         setError(output.lifecycle?.data.message);
+        setIsStarting(false);
+        setIsStopping(false);
         break;
       case "started":
         setLifecycle("running");
+        setIsStarting(false);
         if (output.lifecycle?.data) {
           setExecutionId(output.lifecycle.data);
         }
@@ -286,6 +306,8 @@ export function useBlockExecution(blockId: string): ClientExecutionHandle {
         setLifecycle("success");
         setExecutionId(null);
         setError(null);
+        setIsStarting(false);
+        setIsStopping(false);
         break;
 
       default:
@@ -300,6 +322,8 @@ export function useBlockExecution(blockId: string): ClientExecutionHandle {
 
   return {
     isRunning: lifecycle === "running",
+    isStarting,
+    isStopping,
     isSuccess: lifecycle === "success",
     isError: lifecycle === "error",
     isCancelled: lifecycle === "cancelled",
@@ -310,6 +334,8 @@ export function useBlockExecution(blockId: string): ClientExecutionHandle {
       setLifecycle("idle");
       setError(null);
       setExecutionId(null);
+      setIsStarting(false);
+      setIsStopping(false);
     },
   };
 }