Add a spinner when search is in progress

Author: GuillaumeGomez

src/front-end/css/chrome.css

@@ -344,9 +344,34 @@ mark.fade-out {
     max-width: var(--content-max-width);
 }
 
+#searchbar-outer.searching #searchbar {
+    padding-right: 30px;
+}
+#searchbar-outer .spinner-wrapper {
+    display: none;
+}
+#searchbar-outer.searching .spinner-wrapper {
+    display: block;
+}
+
+.search-wrapper {
+    position: relative;
+}
+
+.spinner-wrapper {
+    --spinner-margin: 2px;
+    position: absolute;
+    margin-block-start: calc(var(--searchbar-margin-block-start) + var(--spinner-margin));
+    right: var(--spinner-margin);
+    top: 0;
+    bottom: var(--spinner-margin);
+    padding: 6px;
+    background-color: var(--bg);
+}
+
 #searchbar {
     width: 100%;
-    margin-block-start: 5px;
+    margin-block-start: var(--searchbar-margin-block-start);
     margin-block-end: 0;
     margin-inline-start: auto;
     margin-inline-end: auto;

src/front-end/css/variables.css

@@ -11,6 +11,7 @@
     --menu-bar-height: 50px;
     --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
     --code-font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
+    --searchbar-margin-block-start: 5px;
 }
 
 /* Themes */

src/front-end/searcher/searcher.js

@@ -22,6 +22,7 @@ window.search = window.search || {};
     }
 
     const search_wrap = document.getElementById('search-wrapper'),
+        searchbar_outer = document.getElementById('searchbar-outer'),
         searchbar = document.getElementById('searchbar'),
         searchresults = document.getElementById('searchresults'),
         searchresults_outer = document.getElementById('searchresults-outer'),
@@ -262,12 +263,13 @@ window.search = window.search || {};
         doc_urls = config.doc_urls;
         searchindex = elasticlunr.Index.load(config.index);
 
-        searchbar.removeAttribute("disabled");
+        searchbar_outer.classList.remove('searching');
+
         searchbar.focus();
 
         const searchterm = searchbar.value.trim();
-        if (searchterm !== "") {
-            searchbar.classList.add("active");
+        if (searchterm !== '') {
+            searchbar.classList.add('active');
             doSearch(searchterm);
         }
     }
@@ -414,10 +416,12 @@ window.search = window.search || {};
         }
     }
 
-    function loadScript(url, id) {
+    function loadSearchScript(url, id) {
         if (document.getElementById(id)) {
             return;
         }
+        searchbar_outer.classList.add('searching');
+
         const script = document.createElement('script');
         script.src = url;
         script.id = id;
@@ -430,7 +434,7 @@ window.search = window.search || {};
 
     function showSearch(yes) {
         if (yes) {
-            loadScript(path_to_root + '{{ resource "searchindex.js" }}', 'search-index');
+            loadSearchScript(path_to_root + '{{ resource "searchindex.js" }}', 'search-index');
             search_wrap.classList.remove('hidden');
             searchicon.setAttribute('aria-expanded', 'true');
         } else {
@@ -511,10 +515,11 @@ window.search = window.search || {};
 
     function doSearch(searchterm) {
         // Don't search the same twice
-        if (current_searchterm == searchterm) {
+        if (current_searchterm === searchterm) {
             return;
         }
-        if (searchindex == null) {
+        searchbar_outer.classList.add('searching');
+        if (searchindex === null) {
             return;
         }
 
@@ -538,6 +543,7 @@ window.search = window.search || {};
 
         // Display results
         showResults(true);
+        searchbar_outer.classList.remove('searching');
     }
 
     // Exported functions

src/front-end/templates/index.hbs

@@ -186,7 +186,12 @@
                 {{#if search_enabled}}
                 <div id="search-wrapper" class="hidden">
                     <form id="searchbar-outer" class="searchbar-outer">
-                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header" disabled>
+                        <div class="search-wrapper">
+                            <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
+                            <div class="spinner-wrapper">
+                                <i class="fa fa-spinner fa-spin"></i>
+                            </div>
+                        </div>
                     </form>
                     <div id="searchresults-outer" class="searchresults-outer hidden">
                         <div id="searchresults-header" class="searchresults-header"></div>

tests/gui/search.goml

@@ -32,16 +32,13 @@ wait-for-text: ("#searchresults-header", "2 search results for 'strikethrough':"
 // Now we test search shortcuts and more page changes.
 go-to: |DOC_PATH| + "index.html"
 
-// First we ensure that the search input is disabled and hidden.
-assert: "#searchbar:disabled"
 // This check is to ensure that the search bar is inside the search wrapper.
 assert: "#search-wrapper #searchbar"
 assert-css: ("#search-wrapper", {"display": "none"})
 
 // Now we make the search input appear with the `S` shortcut.
 press-key: 'S'
-wait-for: "#searchbar:not(:disabled)"
-assert-css: ("#search-wrapper", {"display": "block"})
+wait-for-css: ("#search-wrapper", {"display": "block"})
 // We ensure the search bar has the focus.
 assert: "#searchbar:focus"