Show progressbar while loading lunr and data

assets/_utils.scss

@@ -46,6 +46,15 @@
   display: none;
 }
 
+@mixin spin($duration) {
+  animation: spin $duration ease infinite;
+  @keyframes spin {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
 @mixin fixed {
   position: fixed;
   top: 0;

assets/book.scss

@@ -138,12 +138,15 @@ ul.pagination {
 }
 
 .book-search {
-  #book-search-input {
+  position: relative;
+  margin: $padding-16 0;
+
+  input {
     border: 0;
     border-bottom: $padding-1 solid $body-font-color;
     outline: none;
 
-    padding: $padding-4 $padding-4 $padding-4 $padding-16 + $padding-4;
+    padding: $padding-4 $padding-16 + $padding-4;
     width: 100%;
 
     background: url("svg/search.svg") left center no-repeat;
@@ -153,9 +156,28 @@ ul.pagination {
     &:focus {
       opacity: 1;
     }
+
+    &:required + .book-search-spinner {
+      display: block;
+    }
   }
 
-  #book-search-results li:last-child {
+  .book-search-spinner {
+    position: absolute;
+    right: 0;
+    top: $padding-4;
+
+    width: $padding-16;
+    height: $padding-16;
+
+    border: $padding-1 solid transparent;
+    border-top-color: $body-font-color;
+    border-radius: 50%;
+
+    @include spin(1s)
+  }
+
+  li:last-child {
     margin-bottom: $padding-16 * 2;
   }
 }

assets/search.js

@@ -3,19 +3,20 @@
 (function() {
   const input = document.querySelector("#book-search-input");
   const results = document.querySelector("#book-search-results");
-  const dummy = document.querySelector("#book-search-dummy");
 
   input.addEventListener("focus", init);
   input.addEventListener("keyup", search);
 
   function init() {
-    loadScript("{{ "lunr.min.js" | relURL }}")
+    input.removeEventListener("focus", init); //init once
+    input.required = true;
+
+    loadScript("{{ "lunr.min.js" | relURL }}");
     loadScript("{{ $searchData.RelPermalink }}", function() {
       input.readOnly = false;
+      input.required = false;
       search();
     });
-
-    input.removeEventListener("focus", init);
   }
 
   function search() {
@@ -23,18 +24,18 @@
       results.removeChild(results.firstChild);
     }
 
-    if (!input.value || !window.bookSearch) {
+    if (!input.value) {
-      return
+      return;
     }
 
     const terms = lunr.tokenizer(input.value);
     const searchHits = window.bookSearch.idx.query(function(query) {
       query.term(terms, {
-        boost: 100,
+        boost: 100
       });
       query.term(terms, {
         boost: 10,
-        wildcard: lunr.Query.wildcard.LEADING | lunr.Query.wildcard.TRAILING,
+        wildcard: lunr.Query.wildcard.LEADING | lunr.Query.wildcard.TRAILING
       });
       query.term(terms, {
         editDistance: 2
@@ -43,8 +44,8 @@
 
     searchHits.slice(0, 10).forEach(function(hit) {
       const page = window.bookSearch.pages[hit.ref];
-      const li = dummy.querySelector("li").cloneNode(true),
+      const li = document.createElement("li"),
-            a = li.querySelector("a");
+            a = li.appendChild(document.createElement("a"));
 
       a.href = page.href;
       a.textContent = page.title;

exampleSite/resources/_gen/assets/js/search.js_db9e329433ffca0798ed12c88043b3b3.content

@@ -1,6 +1,5 @@
-(function(){const input=document.querySelector("#book-search-input");const results=document.querySelector("#book-search-results");const dummy=document.querySelector("#book-search-dummy");input.addEventListener("focus",init);input.addEventListener("keyup",search);function init(){loadScript("/example/lunr.min.js")
+(function(){const input=document.querySelector("#book-search-input");const results=document.querySelector("#book-search-results");input.addEventListener("focus",init);input.addEventListener("keyup",search);function init(){input.removeEventListener("focus",init);input.required=true;loadScript("/example/lunr.min.js");loadScript("/example/search-data.min.34183091f91a205581bbdcc247f638b72d22f51e34ab573b24519f95c4a92895.js",function(){input.readOnly=false;input.required=false;search();});}
-loadScript("/example/search-data.min.34183091f91a205581bbdcc247f638b72d22f51e34ab573b24519f95c4a92895.js",function(){input.readOnly=false;search();});input.removeEventListener("focus",init);}
 function search(){while(results.firstChild){results.removeChild(results.firstChild);}
-if(!input.value||!window.bookSearch){return}
+if(!input.value){return;}
-const terms=lunr.tokenizer(input.value);const searchHits=window.bookSearch.idx.query(function(query){query.term(terms,{boost:100,});query.term(terms,{boost:10,wildcard:lunr.Query.wildcard.LEADING|lunr.Query.wildcard.TRAILING,});query.term(terms,{editDistance:2});});searchHits.slice(0,10).forEach(function(hit){const page=window.bookSearch.pages[hit.ref];const li=dummy.querySelector("li").cloneNode(true),a=li.querySelector("a");a.href=page.href;a.textContent=page.title;results.appendChild(li);});}
+const terms=lunr.tokenizer(input.value);const searchHits=window.bookSearch.idx.query(function(query){query.term(terms,{boost:100});query.term(terms,{boost:10,wildcard:lunr.Query.wildcard.LEADING|lunr.Query.wildcard.TRAILING});query.term(terms,{editDistance:2});});searchHits.slice(0,10).forEach(function(hit){const page=window.bookSearch.pages[hit.ref];const li=document.createElement("li"),a=li.appendChild(document.createElement("a"));a.href=page.href;a.textContent=page.title;results.appendChild(li);});}
 function loadScript(src,callback){const script=document.createElement("script");script.defer=true;script.src=src;script.onload=callback;document.head.append(script);}})();

exampleSite/resources/_gen/assets/js/search.js_db9e329433ffca0798ed12c88043b3b3.json

@@ -1 +1 @@
-{"Target":"search.min.be0d747115d15ef35d8cd20b07815450b1c3d2b84c58ba4a9f35dfff3f786384.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-vg10cRXRXvNdjNILB4FUULHD0rhMWLpKnzXf/z94Y4Q="}}
+{"Target":"search.min.ea6096df2339354acbfe0aec0b99caded625821549e54c3b140a20f57db99984.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-6mCW3yM5NUrL/grsC5nK3tYlghVJ5Uw7FAog9X25mYQ="}}

exampleSite/resources/_gen/assets/scss/book.scss_48b060fe05b0a273d182ef83c0605941.json

@@ -1 +1 @@
-{"Target":"book.min.466789b48a1b0e04075f086ad9e175ac3c489b1c9f7848181949c5c634222648.css","MediaType":"text/css","Data":{"Integrity":"sha256-RmeJtIobDgQHXwhq2eF1rDxImxyfeEgYGUnFxjQiJkg="}}
+{"Target":"book.min.0df04f6bec79ae69bc31fcae7e701cf43ad4f0eb54e8d339649bc0c3bc4801ca.css","MediaType":"text/css","Data":{"Integrity":"sha256-DfBPa+x5rmm8MfyufnAc9DrU8OtU6NM5ZJvAw7xIAco="}}

layouts/partials/docs/search.html

@@ -1,9 +1,7 @@
 {{ if default true .Site.Params.BookSearch }}
 <div class="book-search">
-  <ul id="book-search-dummy" class="hidden">
-    <li><a href></a></li><!-- used to clone search result -->
-  </ul>
   <input type="text" placeholder="Search" id="book-search-input" maxlength="64" readonly />
+  <div class="book-search-spinner spinner hidden"></div>
   <ul id="book-search-results"></ul>
 </div>
 {{ end }}