Add gif/spinner while backend is loading g/msea results/ Issue #83

src/indra_cogex/apps/gla/gene_blueprint.py

@@ -114,7 +114,7 @@ class DiscreteForm(FlaskForm):
     keep_insignificant = keep_insignificant_field
     if INDRA_COGEX_WEB_LOCAL:
         local_download = BooleanField("local_download")
-    submit = SubmitField("Submit")
+    submit = SubmitField("Submit", render_kw={"id": "submit-btn"})
 
     def parse_genes(self) -> Tuple[Mapping[str, str], List[str]]:
         """Resolve the contents of the text field."""
@@ -131,7 +131,7 @@ class SignedForm(FlaskForm):
     alpha = alpha_field
     # correction = correction_field
     keep_insignificant = keep_insignificant_field
-    submit = SubmitField("Submit")
+    submit = SubmitField("Submit", render_kw={"id": "submit-btn"})
 
     def parse_positive_genes(self) -> Tuple[Mapping[str, str], List[str]]:
         """Resolve the contents of the text field."""
@@ -165,7 +165,7 @@ class ContinuousForm(FlaskForm):
     source = source_field
     minimum_evidence = minimum_evidence_field
     minimum_belief = minimum_belief_field
-    submit = SubmitField("Submit")
+    submit = SubmitField("Submit", render_kw={"id": "submit-btn"})
 
     def get_scores(self) -> Dict[str, float]:
         """Get scores dictionary."""

src/indra_cogex/apps/gla/metabolite_blueprint.py

@@ -83,7 +83,7 @@ class DiscreteForm(FlaskForm):
     alpha = alpha_field
     correction = correction_field
     keep_insignificant = keep_insignificant_field
-    submit = SubmitField("Submit")
+    submit = SubmitField("Submit", render_kw={"id": "submit-btn"})
 
     def parse_metabolites(self) -> Tuple[Mapping[str, str], List[str]]:
         """Resolve the contents of the text field."""

src/indra_cogex/apps/templates/base_form.html

@@ -1,13 +1,35 @@
 {% 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) }}
+        {{ wtf.render_form(form, method="POST", id="main-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 %}
+

src/indra_cogex/apps/templates/gene_analysis/signed_form.html

@@ -3,6 +3,7 @@
 {% block title %}Signed Gene Set Analysis{% endblock %}
 
 {% block scripts %}
+{{ super() }}
     <script>
         function exampleGenes() {
             document.getElementById('{{ form.positive_genes.name }}').value = "{{ example_positive_hgnc_ids }}";