From 210a508a9009cf4c625e35184e97acbe2ae44d3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sergio=20Mart=C3=ADnez=20Portela?=
 <sergio@codigoparallevar.com>
Date: Mon, 1 May 2023 22:37:00 +0200
Subject: [PATCH] Add simple color loop when loading query.

---
 static/search-box.js |  2 ++
 static/style.css     | 23 +++++++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/static/search-box.js b/static/search-box.js
index 3bac4a5..5e412a5 100644
--- a/static/search-box.js
+++ b/static/search-box.js
@@ -67,6 +67,7 @@ function _codigoparallevar_enable_search_box(selector, options) {
             return;
         }
         lastVal = val;
+        resultsBox.classList.add('loading');
 
         const uri = SEARCH_ENDPOINT + '?q=' + encodeURIComponent(val);
         let query = fetch(uri);
@@ -79,6 +80,7 @@ function _codigoparallevar_enable_search_box(selector, options) {
                     return;
                 }
 
+                resultsBox.classList.remove('loading');
                 resultsList.innerHTML = '';
                 for (const list of [
                     body.results.notes.filter(n => n.is_todo !== "1"),
diff --git a/static/style.css b/static/style.css
index 28750b1..cefd238 100644
--- a/static/style.css
+++ b/static/style.css
@@ -84,6 +84,29 @@ body nav input {
     border-bottom: 1px solid #000;
 }
 
+@keyframes loading-query {
+    from {
+        border-bottom-color: hsl(0 80% 40%);
+    }
+    30% {
+        border-bottom-color: hsl(80 80% 40%);
+    }
+    60% {
+        border-bottom-color: hsl(180 80% 40%);
+    }
+    to {
+        border-bottom-color: hsl(360 80% 40%);
+    }
+}
+.results-box-container .results-box.loading input {
+    animation-name: loading-query;
+    border-bottom-width: 2px;
+    animation-duration: 2s;
+    margin-bottom: -1px;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
 /* Search box results */
 .results-box ul {
     list-style: none;