feat(search): move search spinner into input

NodeSecure · Dec 7, 2024 · 518a986 · 518a986
1 parent 6be3c4a
commit 518a986
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git 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
@@ -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");