Spinner shows when deploy is clicked

panel/src/panel/static/style.sass

@@ -8,7 +8,7 @@ body
   width: 48px
   height: 48px
   border: 5px solid #000
-  border-bottom-color: #FF3D00
+  border-bottom-color: #F34508
   border-radius: 50%
   display: inline-block
   box-sizing: border-box
@@ -24,3 +24,9 @@ body
   left: 50%
   transform: translate(-50%, -50%)
   display: block
+
+.htmx-indicator
+  display: none
+
+.htmx-request .htmx-indicator
+  display: inline-block

panel/src/panel/templates/base.html

@@ -5,6 +5,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
 
     {% load compress %}
     {% compress css %}

panel/src/panel/templates/configuration_form.html

@@ -5,10 +5,17 @@
 
   {{ form.as_p }}
 
-  <button class="button" type="submit" name="deploy">Deploy</button>
+  <button id="deploy-button" class="button"
+          hx-post="{% url 'configuration_form' %}"
+          hx-trigger="click"
+          hx-indicator="#spinner-container">
+      Deploy
+      <span class="htmx-indicator loader"></span>
+  </button>
+
   <button class="button" type="submit" name="save">Save</button>
 
-  <div id="spinner-container">
+  <div id="spinner-container" class="htmx-indicator">
     <span class="loader"></span>
   </div>
 </form>