diff options
| author | Florian Fischer <florian.fischer@muhq.space> | 2023-05-21 14:34:05 +0200 |
|---|---|---|
| committer | Florian Fischer <florian.fischer@muhq.space> | 2023-05-21 14:34:05 +0200 |
| commit | f638d3975225b895e7b0a8fb79c6c6de288a732a (patch) | |
| tree | 4391cda3896e692ce90ccce4af02dfe6c4e9976b | |
| parent | 22fc9e2bc6c8f451dde4ad22aeb93ea99e6f3635 (diff) | |
| download | WRMS-f638d3975225b895e7b0a8fb79c6c6de288a732a.tar.gz WRMS-f638d3975225b895e7b0a8fb79c6c6de288a732a.zip | |
add searching indicator
| -rw-r--r-- | web/client.html | 11 |
1 files changed, 10 insertions, 1 deletions
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> |