From 1d600c7fd73fa9a6fee264be8fa3addc71620a0e Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Mon, 4 Dec 2023 22:28:39 +0530
Subject: [PATCH] (feat): added custom qr code loading delay spinner

---
 htdocs/assets/_floatingbar.php         |  3 ++-
 htdocs/assets/js/floatingbar-config.js | 11 +++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index d4dc07d..6ef8e8d 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -95,7 +95,8 @@
         <p class="self-start text-xl hidden md:block">Scan to Share</p>
         <div class="bg-bg_primary p-10 md:p-5 rounded-lg my-3">
             <div class="qrwrapper aspect-square w-full md:w-[150px]">
-                <img class="w-full" id="pageqrcode" src="https://api.qrserver.com/v1/create-qr-code/?data=https://neosubhamoy.dev&color=38BDF8&bgcolor=0F172A" alt="qrcode">
+                <img class="w-full hidden" id="pageqrcode" src="https://api.qrserver.com/v1/create-qr-code/?data=https://neosubhamoy.dev&color=38BDF8&bgcolor=0F172A" alt="qrcode">
+                <div id="qrspinnercont" class="qrspinnercont w-full h-full flex justify-center items-center"><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>
         <button class="w-full px-4 py-2 rounded-full border-[2px] border-accent_primary text-accent_primary my-2 hover:shadow-lg hover:rounded-lg hover:shadow-accent_primary_transparent transition transform duration-500" title="Download the page qr code" onclick="download_image(document.getElementById('pageqrcode').src, document.location.href, 'qr')"><i class="fa-solid fa-download"></i>&nbsp; Download QR</button>
diff --git a/htdocs/assets/js/floatingbar-config.js b/htdocs/assets/js/floatingbar-config.js
index 271e877..39cf1bf 100644
--- a/htdocs/assets/js/floatingbar-config.js
+++ b/htdocs/assets/js/floatingbar-config.js
@@ -13,6 +13,7 @@ const shareWin = document.getElementById("sharewindow");
 const searchDef = document.getElementById("defresults");
 const searchRes = document.getElementById("searchresults");
 const spinner = document.getElementById("spinnercont");
+const spinnerQr = document.getElementById("qrspinnercont");
 const qrCode = document.getElementById("pageqrcode");
 const linkInput = document.getElementById("pageurlinput");
 const embedCode = document.getElementById("embedcodetag");
@@ -352,6 +353,7 @@ function activate_share() {
     shareCloseBtn.classList.remove("hidden");
     shareWin.classList.add("floatingshare-window-show");
     document.body.classList.add("overflow-hidden");
+    show_qr_loading_delay();  //show qrcode loading delay spinner
 }
 
 // function to close the share window
@@ -394,6 +396,15 @@ document.addEventListener("keydown", function(event) {
     }
 });
 
+// custom qr loading delay spinner
+function show_qr_loading_delay() {
+    setTimeout(() => {
+        spinnerQr.classList.remove("flex");
+        spinnerQr.classList.add("hidden");
+        qrCode.classList.remove("hidden");
+    }, 2000);
+}
+
 // function to share with webShareAPI (Native OS Share)
 function call_webshare_api() {
     if(navigator.share) {