From 5092eb42f062b1695c4e39619f0bd74a876cfac2 Mon Sep 17 00:00:00 2001
From: Alexander_Kabui
Date: Tue, 2 Jan 2024 13:15:57 +0300
Subject: add loading spinner for form submission

---
 wqflask/wqflask/static/gif/loader.gif      | Bin 0 -> 43889 bytes
 wqflask/wqflask/templates/base.html        |   4 ++--
 wqflask/wqflask/templates/gnqa.html        |  17 +++++++++++++++++
 wqflask/wqflask/templates/gnqa_answer.html |  19 +++++++++++++++++++
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 wqflask/wqflask/static/gif/loader.gif

diff --git a/wqflask/wqflask/static/gif/loader.gif b/wqflask/wqflask/static/gif/loader.gif
new file mode 100644
index 00000000..c2146b77
Binary files /dev/null and b/wqflask/wqflask/static/gif/loader.gif differ
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();
+
             }
         })
     });
-- 
cgit v1.2.3