From 6bd36c6647652edb97fa3652e607ac113cb094dc Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Mon, 4 Dec 2023 21:36:22 +0530
Subject: [PATCH] (feat): added search result loading spinner

---
 htdocs/assets/_floatingbar.php         |  3 +++
 htdocs/assets/js/floatingbar-config.js |  6 +++++-
 htdocs/assets/style.css                | 13 +++++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index ec041e0..d4dc07d 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -86,6 +86,9 @@
     <div id="searchresults" class="searchresults w-full flex-col justify-start px-2 mt-1 hidden">
         <!-- Search Results will be displayed here by JS -->
     </div>
+    <div id="spinnercont" class="spinnercont w-full h-full absolute top-0 left-0 justify-center items-center bg-bg_secondary hidden">
+        <div class="spinner border-[3px] border-accent_secondary_transparent border-t-[3px] border-t-accent_primary rounded-[50%] h-[30px] w-[30px] animate-spin"></div>
+    </div>
 </div>
 <div id="sharewindow" class="sharewindow w-[90vw] md:w-[50vw] mx-auto py-6 fixed inset-x-0 bottom-[20vh] z-40 justify-between flex-col md:flex-row bg-bg_secondary rounded-xl hidden">
     <div class="shareviaqr w-full md:w-[40%] h-full flex flex-col py-3 px-7">
diff --git a/htdocs/assets/js/floatingbar-config.js b/htdocs/assets/js/floatingbar-config.js
index 36fec81..bf4a64d 100644
--- a/htdocs/assets/js/floatingbar-config.js
+++ b/htdocs/assets/js/floatingbar-config.js
@@ -12,6 +12,7 @@ const searchWin = document.getElementById("searchwindow");
 const shareWin = document.getElementById("sharewindow");
 const searchDef = document.getElementById("defresults");
 const searchRes = document.getElementById("searchresults");
+const spinner = document.getElementById("spinnercont");
 const qrCode = document.getElementById("pageqrcode");
 const linkInput = document.getElementById("pageurlinput");
 const embedCode = document.getElementById("embedcodetag");
@@ -118,6 +119,8 @@ function perform_search(searchInput, searchDef, searchRes) {
     searchDef.classList.add("hidden");
     searchRes.classList.remove("hidden");
     searchRes.classList.add("flex");
+    spinner.classList.remove("hidden");
+    spinner.classList.add("flex");
     let searchString = searchInput.value;
 
     $.ajax({
@@ -144,7 +147,8 @@ function perform_search(searchInput, searchDef, searchRes) {
             console.error('error:', error);
         },
         complete: function() {
-            console.log("completed");
+            spinner.classList.remove("flex");
+            spinner.classList.add("hidden");
         }
     });
 }
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index 2a110b2..f858cc9 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -706,6 +706,11 @@ video {
   margin-bottom: 0.30rem;
 }
 
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1163,6 +1168,10 @@ video {
   border-width: 5px;
 }
 
+.border-\[3px\] {
+  border-width: 3px;
+}
+
 .border-b-\[2px\] {
   border-bottom-width: 2px;
 }
@@ -1179,6 +1188,10 @@ video {
   border-top-width: 5px;
 }
 
+.border-t-\[3px\] {
+  border-top-width: 3px;
+}
+
 .border-\[rgba\(255\2c _255\2c _255\2c _0\.15\)\] {
   border-color: rgba(255, 255, 255, 0.15);
 }