From 3855cf6bf0e67f2b761fdcd4605550fb418c102d Mon Sep 17 00:00:00 2001
From: Oleg Belyaev <obelyaev@gmail.com>
Date: Mon, 24 Mar 2025 01:36:05 +0300
Subject: [PATCH] added search loader

---
 static/abaev-html.css   | 15 +++++++++++++++
 static/abaev.js         |  7 ++++++-
 xq/restx_dict_cached.xq |  2 +-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/static/abaev-html.css b/static/abaev-html.css
index aca839b..21d5e62 100644
--- a/static/abaev-html.css
+++ b/static/abaev-html.css
@@ -542,3 +542,18 @@ https://github.com/frontaid/natural-selection
     float: left;
     padding-right: 0.5vw;
 }
+
+.loader {
+  border: 2px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 2px solid #3498db;
+  width: 2ex;
+  height: 2ex;
+  -webkit-animation: spin 2s linear infinite; /* Safari */
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
diff --git a/static/abaev.js b/static/abaev.js
index c2aa5f7..bbaeac6 100644
--- a/static/abaev.js
+++ b/static/abaev.js
@@ -1,10 +1,15 @@
 $( document ).ready(function() {
-    // GLOBALS
+    // GLOBALS;
+
     // Link elements that do not have href out of the box
     $('.link').on("click", function () {
       window.location=$(this)[0].dataset.href+window.location.search+window.location.hash;
     });
 
+    $('#abv-search').on("submit", function () {
+      $('#abv-search-icon').replaceWith('<div class="loader"></div>');
+    });
+
     // init Infinite Scroll
     $('main').infiniteScroll({
       path: '.pagination__next',
diff --git a/xq/restx_dict_cached.xq b/xq/restx_dict_cached.xq
index 3061ec0..fb49720 100644
--- a/xq/restx_dict_cached.xq
+++ b/xq/restx_dict_cached.xq
@@ -105,7 +105,7 @@ declare function page:header($lang as xs:string, $href-other as xs:string) {
                        aria-label="Search" />
                 {if (not(session:get('searchQuery'))) then
                 <button type="submit">
-                  <svg xmlns="http://www.w3.org/2000/svg" 
+                  <svg id="abv-search-icon" xmlns="http://www.w3.org/2000/svg" 
                        width="16" height="16" 
                        viewBox="0 0 16 16"
                        fill="currentColor" class="bi bi-search">