From f638d3975225b895e7b0a8fb79c6c6de288a732a Mon Sep 17 00:00:00 2001
From: Florian Fischer <florian.fischer@muhq.space>
Date: Sun, 21 May 2023 14:34:05 +0200
Subject: add searching indicator

---
 web/client.html | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'web')

diff --git a/web/client.html b/web/client.html
index 10ba320..f0ec6ed 100644
--- a/web/client.html
+++ b/web/client.html
@@ -232,6 +232,11 @@
       };
 
       function submitSearch() {
+        let searchingIndicator = document.getElementById("searching");
+        searchingIndicator.style.display = "block";
+        let searchResultsOverlay = document.getElementById("searchResultsOverlay");
+        searchResultsOverlay['aria-busy'] = true;
+
         const form = new FormData(document.getElementById("searchForm"));
         const pattern = new URLSearchParams(form).toString();
         new HttpClient().get("/search?" + pattern, showSearchResults);
@@ -259,7 +264,10 @@
         if (!response)
           return
 
+        let searchingIndicator = document.getElementById("searching");
+        searchingIndicator.style.display = "none";
         let searchResultsOverlay = document.getElementById("searchResultsOverlay");
+        searchResultsOverlay['aria-busy'] = false;
 
         let searchResults = document.getElementById("searchResults");
         // Clear search Results
@@ -304,7 +312,8 @@
       {{end}}
     </div>
 
-    <div id="searchResultsOverlay" style="display: none;">
+    <progress id="searching" aria-label="Searching" style="display: none;"></progress>
+    <div id="searchResultsOverlay" style="display: none;" aria-busy="true" aria-describedby="searching">
       <ul id="searchResults">
       </ul>
     </div>
-- 
cgit v1.2.3