From 81dcb715bdf7371975f2fe3e97d15bf89505975e Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Tue, 13 May 2025 12:16:41 +0200
Subject: [PATCH] Add a busy class to the terminal

---
 app/assets/stylesheets/terminals.css              | 4 ++++
 app/javascript/controllers/terminal_controller.js | 7 ++++++-
 app/views/commands/_form.html.erb                 | 2 +-
 app/views/commands/_terminal.html.erb             | 1 +
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index 9ce1ea6ec..2532bd7b4 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -155,4 +155,8 @@
       display: block;
     }
   }
+
+  .terminal--busy {
+    border: 5px solid orange;
+  }
 }
diff --git a/app/javascript/controllers/terminal_controller.js b/app/javascript/controllers/terminal_controller.js
index ed34bda83..133957699 100644
--- a/app/javascript/controllers/terminal_controller.js
+++ b/app/javascript/controllers/terminal_controller.js
@@ -4,7 +4,7 @@ import { marked } from "marked"
 
 export default class extends Controller {
   static targets = [ "input", "form", "output", "confirmation", "redirected" ]
-  static classes = [ "error", "confirmation", "help", "output" ]
+  static classes = [ "error", "confirmation", "help", "output", "busy" ]
   static values = { originalInput: String, waitingForConfirmation: Boolean, autoSubmitAfterRedirection: Boolean }
 
   connect() {
@@ -63,6 +63,10 @@ export default class extends Controller {
     this.element.classList.remove(this.errorClass)
   }
 
+  commandSubmitted() {
+    this.element.classList.add(this.busyClass)
+  }
+
   get #showHelpCommandEntered() {
     return [ "/help", "/?" ].includes(this.inputTarget.value)
   }
@@ -109,6 +113,7 @@ export default class extends Controller {
 
     this.element.classList.remove(this.errorClass)
     this.element.classList.remove(this.confirmationClass)
+    this.element.classList.remove(this.busyClass)
   }
 
   #showError() {
diff --git a/app/views/commands/_form.html.erb b/app/views/commands/_form.html.erb
index 75b69ab2e..aff453c9e 100644
--- a/app/views/commands/_form.html.erb
+++ b/app/views/commands/_form.html.erb
@@ -4,7 +4,7 @@
       data: {
         controller: "form",
         terminal_target: "form",
-        action: "turbo:submit-end->terminal#focus keydown.meta+k@document->terminal#focus keydown.enter->terminal#executeCommand keydown.esc->terminal#hideMenus turbo:submit-end->terminal#handleCommandResponse"
+        action: "turbo:submit-start->terminal#commandSubmitted turbo:submit-end->terminal#focus keydown.meta+k@document->terminal#focus keydown.enter->terminal#executeCommand keydown.esc->terminal#hideMenus turbo:submit-end->terminal#handleCommandResponse"
       } do %>
   <label class="terminal__label txt-nowrap" for="fizzy_do">Fizzy do &gt;</label>
 
diff --git a/app/views/commands/_terminal.html.erb b/app/views/commands/_terminal.html.erb
index 02639d079..02cf6188b 100644
--- a/app/views/commands/_terminal.html.erb
+++ b/app/views/commands/_terminal.html.erb
@@ -7,6 +7,7 @@
         terminal_confirmation_class: "terminal--confirmation",
         terminal_help_class: "terminal--showing-help",
         terminal_output_class: "terminal--showing-output",
+        terminal_busy_class: "terminal--busy",
         toggle_class_toggle_class: "terminal--open",
         turbo_permanent: true,
         action: "keydown->terminal#handleKeyPress keydown->navigable-list#navigate focusin->navigable-list#select keydown.esc->toggle-class#remove:stop keydown.esc->terminal#focus keydown.esc->navigable-list#selectLast keydown.esc@document->terminal#hideMenus" } do %>