From 63582d0549d4add501888da9d7d86ac3b7e912a3 Mon Sep 17 00:00:00 2001
From: Pierre Demailly <pierredemailly.pro@gmail.com>
Date: Sat, 7 Dec 2024 13:09:18 +0100
Subject: [PATCH] feat(search): add spinner while searching packages

---
 public/components/views/search/search.css | 6 +++++-
 public/components/views/search/search.js  | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/public/components/views/search/search.css b/public/components/views/search/search.css
index 9cf47df4..1bca4cb0 100644
--- a/public/components/views/search/search.css
+++ b/public/components/views/search/search.css
@@ -121,7 +121,7 @@
   margin: auto;
   padding: 10px;
   border-radius: 4px;
-  background: linear-gradient(135deg,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(234,238,239,1) 100%);
+  background: linear-gradient(135deg, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(234, 238, 239, 1) 100%);
   box-shadow: 2px 2px 20px #3722af1f;
   border: 1px solid #FFF;
   box-sizing: border-box;
@@ -168,6 +168,10 @@ input:-webkit-autofill {
   -webkit-background-clip: text;
 }
 
+.search-spinner {
+  margin: 25px auto 0;
+}
+
 .package-result {
   display: flex;
   flex-direction: row;
diff --git a/public/components/views/search/search.js b/public/components/views/search/search.js
index fcd098ac..aa89b022 100644
--- a/public/components/views/search/search.js
+++ b/public/components/views/search/search.js
@@ -55,8 +55,15 @@ export class SearchView {
         return;
       }
 
+      const loaderElement = createDOMElement("div", {
+        classList: ["spinner", "search-spinner"]
+      });
+      this.searchForm.appendChild(loaderElement);
+
       const { result, count } = await getJSON(`/search/${encodeURIComponent(packageName)}`);
 
+      this.searchForm.querySelector(".spinner").remove();
+
       const divResultContainer = document.createElement("div");
       divResultContainer.classList.add("result-container");