From 518a98693dd9f762d81a39ec61e9c247a4253f6c Mon Sep 17 00:00:00 2001
From: Pierre Demailly <pierredemailly.pro@gmail.com>
Date: Sat, 7 Dec 2024 14:18:07 +0100
Subject: [PATCH] feat(search): move search spinner into input

---
 public/components/views/search/search.css | 16 ++++++++++++++--
 public/components/views/search/search.js  |  7 ++++---
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/public/components/views/search/search.css b/public/components/views/search/search.css
index daa23f52..36f02c3c 100644
--- a/public/components/views/search/search.css
+++ b/public/components/views/search/search.css
@@ -125,6 +125,7 @@
   box-shadow: 2px 2px 20px #3722af1f;
   border: 1px solid #FFF;
   box-sizing: border-box;
+  position: relative;
 }
 
 .form-group>input,
@@ -158,6 +159,18 @@
   animation: spinner-d3wgkg 1s infinite linear;
 }
 
+.spinner-small {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 4px solid #dbdcef;
+  border-right-color: #474bff;
+  animation: spinner-d3wgkg 1s infinite linear;
+  position: absolute;
+  right: 10px;
+  margin: 0 !important;
+}
+
 @keyframes spinner-d3wgkg {
   to {
     transform: rotate(1turn);
@@ -226,12 +239,11 @@ input:-webkit-autofill {
 
 .cache-packages .package-result {
   margin-top: 10px;
-  cursor: pointer;
   background: #54688419;
   padding: 5px 10px;
 }
 
-.cache-packages .package-result:hover {
+.cache-packages .package-result:has(span:hover) {
   color: var(--secondary-darker);
   background: #5468842a;
   cursor: pointer;
diff --git a/public/components/views/search/search.js b/public/components/views/search/search.js
index 5a61a627..627075bd 100644
--- a/public/components/views/search/search.js
+++ b/public/components/views/search/search.js
@@ -35,6 +35,7 @@ export class SearchView {
   initialize() {
     this.searchContainer = document.querySelector("#search--view .container");
     this.searchForm = document.querySelector("#search--view form");
+    const formGroup = this.searchForm.querySelector(".form-group");
     const input = this.searchForm.querySelector("input");
     const lang = currentLang();
 
@@ -56,13 +57,13 @@ export class SearchView {
       }
 
       const loaderElement = createDOMElement("div", {
-        classList: ["spinner", "search-spinner"]
+        classList: ["spinner-small", "search-spinner"]
       });
-      this.searchForm.appendChild(loaderElement);
+      formGroup.appendChild(loaderElement);
 
       const { result, count } = await getJSON(`/search/${encodeURIComponent(packageName)}`);
 
-      this.searchForm.querySelector(".spinner").remove();
+      this.searchForm.querySelector(".spinner-small").remove();
 
       const divResultContainer = document.createElement("div");
       divResultContainer.classList.add("result-container");