Add a busy class to the terminal

app/assets/stylesheets/terminals.css

@@ -155,4 +155,8 @@
       display: block;
     }
   }
+
+  .terminal--busy {
+    border: 5px solid orange;
+  }
 }

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() {

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>
 

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 %>