diff --git a/src/site/_includes/components/searchContainer.njk b/src/site/_includes/components/searchContainer.njk
index 5f986ce..8de8fee 100644
--- a/src/site/_includes/components/searchContainer.njk
+++ b/src/site/_includes/components/searchContainer.njk
@@ -8,7 +8,7 @@
             </div>
 
             <div class="navigation-hint">
-               <i class="fa fa-arrow-up" aria-hidden="true"></i>
+                <i class="fa fa-arrow-up" aria-hidden="true"></i>
                 <i class="fa fa-arrow-down" aria-hidden="true"></i>
                 <span>to navigate</span>
             </div>
diff --git a/src/site/_includes/components/searchScript.njk b/src/site/_includes/components/searchScript.njk
index 2ebe62e..4a76442 100644
--- a/src/site/_includes/components/searchScript.njk
+++ b/src/site/_includes/components/searchScript.njk
@@ -19,6 +19,50 @@
         window.search();
     }
 
+    const loadingSvg = `
+    <svg width="100" height="100" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
+      <g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2">
+          <circle cx="22" cy="22" r="6" stroke-opacity="0">
+              <animate attributeName="r"
+                   begin="1.5s" dur="3s"
+                   values="6;22"
+                   calcMode="linear"
+                   repeatCount="indefinite" />
+              <animate attributeName="stroke-opacity"
+                   begin="1.5s" dur="3s"
+                   values="1;0" calcMode="linear"
+                   repeatCount="indefinite" />
+              <animate attributeName="stroke-width"
+                   begin="1.5s" dur="3s"
+                   values="2;0" calcMode="linear"
+                   repeatCount="indefinite" />
+          </circle>
+          <circle cx="22" cy="22" r="6" stroke-opacity="0">
+              <animate attributeName="r"
+                   begin="3s" dur="3s"
+                   values="6;22"
+                   calcMode="linear"
+                   repeatCount="indefinite" />
+              <animate attributeName="stroke-opacity"
+                   begin="3s" dur="3s"
+                   values="1;0" calcMode="linear"
+                   repeatCount="indefinite" />
+              <animate attributeName="stroke-width"
+                   begin="3s" dur="3s"
+                   values="2;0" calcMode="linear"
+                   repeatCount="indefinite" />
+          </circle>
+          <circle cx="22" cy="22" r="8">
+              <animate attributeName="r"
+                   begin="0s" dur="1.5s"
+                   values="6;1;2;3;4;5;6"
+                   calcMode="linear"
+                   repeatCount="indefinite" />
+          </circle>
+      </g>
+  </svg>`;
+
+
     function debounce(func, wait, immediate) {
         var timeout;
         return function() {
@@ -119,7 +163,7 @@
             }
         });
 
-        const debouncedSearch = debounce(search, 250, false);
+        const debouncedSearch = debounce(search, 200, false);
         field = document.querySelector('#term');
         field.addEventListener('keydown', (e) => {
             if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
@@ -145,6 +189,8 @@
         if(search == lastSearch) return;
         console.log(`search for ${search}`);
         window.lastSearch = search;
+
+        resultsDiv.innerHTML = loadingSvg;
         let searchRequest = await fetch(`/api/search?term=${encodeURIComponent(search)}`);
         let results = await searchRequest.json();
         let resultsHTML = '';