From 2d88a78cf3a2b636e7d6cadb05ed58299c1cfd72 Mon Sep 17 00:00:00 2001
From: Ole Eskild Steensen <ole@savvy.no>
Date: Sun, 8 Jan 2023 15:55:12 +0100
Subject: [PATCH] Visual feedback when search is loading

---
 .../_includes/components/searchContainer.njk  |  2 +-
 .../_includes/components/searchScript.njk     | 46 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 2 deletions(-)

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 367da67..39fbdc3 100644
--- a/src/site/_includes/components/searchScript.njk
+++ b/src/site/_includes/components/searchScript.njk
@@ -11,6 +11,48 @@
         }
     }
 
+    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() {
@@ -111,7 +153,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') {
@@ -137,6 +179,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 = '';