Add a spinner when search is in progress

Author: GuillaumeGomez

src/theme/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/theme/css/variables.css

@@ -10,6 +10,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/theme/index.hbs

@@ -170,7 +170,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>

src/theme/searcher/searcher.js

@@ -255,7 +255,6 @@ window.search = window.search || {};
     function init(config) {
         results_options = config.results_options;
         search_options = config.search_options;
-        searchbar_outer = config.searchbar_outer;
         doc_urls = config.doc_urls;
         searchindex = elasticlunr.Index.load(config.index);
 
@@ -471,6 +470,7 @@ window.search = window.search || {};
     function doSearch(searchterm) {
         // Don't search the same twice
         if (current_searchterm == searchterm) { return; }
+        searchbar_outer.classList.add("searching");
         if (searchindex == null) { return; }
 
         current_searchterm = searchterm;
@@ -493,6 +493,7 @@ window.search = window.search || {};
 
         // Display results
         showResults(true);
+        searchbar_outer.classList.remove("searching");
     }
 
     // Exported functions

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"