add loading spinner for form submission

4 files changed, 38 insertions, 2 deletions

diff --git a/wqflask/wqflask/static/gif/loader.gif b/wqflask/wqflask/static/gif/loader.gif
new file mode 100644
index 00000000..c2146b77
--- /dev/null
+++ b/wqflask/wqflask/static/gif/loader.gif
diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html
index e0fc9e63..984cf92a 100644
--- a/wqflask/wqflask/templates/base.html
+++ b/wqflask/wqflask/templates/base.html
@@ -198,11 +198,11 @@
         </div>
     </div>
     <div class="container-fluid" style="width: 100%; min-width: 650px; position: relative;background-color: #d5d5d5; height: 100px;">
-        <form id="gnqna_search_home" style="display:none;width: 100%;">
+        <form id="gnqna_search_home" method="POST" action="/gnqna" style="display:none;width: 100%;">
            
            <div >
               <input  id="gnqna_search_home_input" style="width:45vw" type="text" autocomplete="off" 
-required placeholder="Ask More Questions or Topics (E.g Genes) " value='' name="quedrygnqa">  
+required placeholder="Ask More Questions or Topics (E.g Genes) " value='' name="querygnqa">  
            </div> 
         </form>
         <form method="get" action="/gsearch" id="globalsearchform">
diff --git a/wqflask/wqflask/templates/gnqa.html b/wqflask/wqflask/templates/gnqa.html
index 56d22d36..46cc1e90 100644
--- a/wqflask/wqflask/templates/gnqa.html
+++ b/wqflask/wqflask/templates/gnqa.html
@@ -25,10 +25,25 @@
   align-items: center;
 }
 
+  #loader {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    background: rgba(0,0,0,0.75) url("/static/gif/loader.gif") no-repeat center center;
+    z-index: 10000;
+}
+
+
 </style>
 
 
 <div style="height: 100vh;width: 100vw; ">
+
+<div id="loader"></div>
 <div id="main-search-controller" style="margin: 20px;width: 100%;height: 100%;">
 <div id="gnqna_controller">
   <form method="POST" action="/gnqna" id="gnqna_form">
@@ -54,6 +69,8 @@ required placeholder="Ask a Question or Topic e.g ( Genes) " value='' name="quer
        $("#gnqna_search").keypress(function(event) {
             if (event.keyCode === 13) {
             $('#gnqna_form').submit();
+            let spinner = $("#loader")
+            spinner.show()
             }
         })
 
diff --git a/wqflask/wqflask/templates/gnqa_answer.html b/wqflask/wqflask/templates/gnqa_answer.html
index 68516bb7..99242b29 100644
--- a/wqflask/wqflask/templates/gnqa_answer.html
+++ b/wqflask/wqflask/templates/gnqa_answer.html
@@ -95,11 +95,27 @@
    / box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; */
   }
 
+  #loader {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    background: rgba(0,0,0,0.75) url("/static/gif/loader.gif") no-repeat center center;
+    z-index: 10000;
+}
+
 
 
 </style>
 
 <div style="height: 90vh;width: 100vw; margin-bottom: 10px;">
+
+  <div id="loader">
+    
+  </div>
 <div style="margin:10px; border:1px solid #ccc;padding: 15px;">
   <div >
     <h1 id="gnqa_query" style="font-weight: bolder">{{query}}<h1>
@@ -141,6 +157,9 @@
             if (event.keyCode === 13) {
                 console.log("clicked this button")
             $('#gnqna_search_home').submit();
+            let spinner = $("#loader")
+            spinner.show();
+
             }
         })
     });