From 947e9f984bdacfceaae70c0f02ea277e757e0293 Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Wed, 4 Dec 2019 10:54:40 +0100
Subject: [PATCH] Add loading animation for query request

---
 app/templates/corpora/analyse_corpus.html.j2 | 24 +++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2
index 74731d23..61508269 100644
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -103,11 +103,23 @@
   </div>
 </div>
 
-<div class="col s12 m9">
+<div class="col s12 m9 hide" id="getting-query-results">
+  <div class="card">
+    <div class="card-content">
+      <span class="card-title">Fetching your results!</span>
+      <div>
+        <div class="progress">
+          <div class="indeterminate"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="col s12 m9 hide" id="recieved-query-results">
   <div class="card">
     <div class="card-content">
       <span class="card-title">Query Results</span>
-      <div>
         <table>
           <thead>
             <tr>
@@ -119,7 +131,6 @@
           </thead>
           <tbody id="query-results"></tbody>
         </table>
-      </div>
     </div>
   </div>
 </div>
@@ -193,6 +204,8 @@
   var queryFormSubmitElement = document.getElementById("query-form-submit");
   var queryResultsElement = document.getElementById("query-results");
   var contextResultsElement = document.getElementById("recieved-data");
+  var queryLoadingElement = document.getElementById("getting-query-results");
+  var queryResultsTableElement = document.getElementById("recieved-query-results");
   queryFormSubmitElement.addEventListener("click", function(event) {
     event.preventDefault();
     let formData = new FormData(queryFormElement);
@@ -200,12 +213,17 @@
                      "hits_per_page": formData.get("hits_per_page"),
                      "query": formData.get("query")};
     socket.emit("corpus_analysis", queryData);
+    queryLoadingElement.classList.remove("hide");
+    queryResultsTableElement.classList.add("hide");
     M.toast({html: "Query has been sent!"});
   });
 
   socket.on("corpus_analysis", function(message) {
+    queryLoadingElement.classList.add("hide");
+    queryResultsTableElement.classList.remove("hide");
     console.log(message);
     if (message === null) {
+      queryResultsTableElement.classList.add("hide");
       M.toast({html: "No results for this query!", displayLength: 10000, classes: "red"});
     } else {
     var matchElement;