feat(search): add spinner while searching packages

NodeSecure · Dec 7, 2024 · 63582d0 · 63582d0
1 parent 09693d7
commit 63582d0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -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");