Add spinner and disable submit button functionality on form submission

src/indra_cogex/apps/templates/base_form.html

@@ -1,13 +1,36 @@
 {% extends "base.html" %}
-
 {% import "bootstrap4/form.html" as wtf %}
-
 {% block container %}
     <div class="card card-body bg-light">
         <h1 class="display-4">{% block header %}{% endblock %}</h1>
         <p class="lead">
             {% block lead %}{% endblock %}
         </p>
-        {{ wtf.render_form(form) }}
+        <form id="main-form" method="POST">
+            {{ wtf.render_form(form) }}
+        </form>
     </div>
 {% endblock %}
+{% block scripts %}
+{{ super() }}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+      let submitButton = document.getElementById('submit-btn');
+      let child = document.createElement("span")
+      child.classList.add("spinner-border", "spinner-border-sm", "ml-2", "d-none")
+      child.setAttribute("aria-hidden", "true")
+      child.setAttribute("role", "status")
+      child.id = "form-spinner"
+      submitButton.parentElement.appendChild(child)
+
+      const form = document.getElementById('main-form');
+      var spinner;
+
+      form.addEventListener('submit', function(event) {
+           submitButton.disabled = true;
+           spinner = document.getElementById('form-spinner');
+           spinner.classList.remove("d-none")
+      });
+    });
+</script>
+{% endblock %}