Block serach bar untill index is loaded

2 files changed, 8 insertions, 7 deletions

diff --git a/assets/book.scss b/assets/book.scss
index 86bcf84..3ef2294 100644
--- a/assets/book.scss
+++ b/assets/book.scss
@@ -139,18 +139,17 @@ ul.pagination {
 
 .book-search {
   #book-search-input {
-    opacity: .33;
-
     border: 0;
     border-bottom: $padding-1 solid $body-font-color;
     outline: none;
 
-    padding: $padding-4 $padding-8 $padding-4 $padding-16 + $padding-4;
-    width: 85%;
-  
+    padding: $padding-4 $padding-4 $padding-4 $padding-16 + $padding-4;
+    width: 100%;
+
     background: url("svg/search.svg") left center no-repeat;
     background-size: $padding-16;
 
+    opacity: 0.33;
     &:focus {
       opacity: 1;
     }
@@ -161,7 +160,6 @@ ul.pagination {
   }
 }
 
-
 .book-toc {
   flex: 0 0 $toc-width;
   font-size: $font-size-12;
diff --git a/assets/search.js b/assets/search.js
index edb81e9..eb38c1d 100644
--- a/assets/search.js
+++ b/assets/search.js
@@ -10,7 +10,10 @@
 
   function init() {
     loadScript("{{ "lunr.min.js" | relURL }}")
-    loadScript("{{ $searchData.RelPermalink }}", search);
+    loadScript("{{ $searchData.RelPermalink }}", function() {
+      input.readOnly = false;
+      search();
+    });
 
     input.removeEventListener("focus", init);
   }