feat(search): add spinner while searching package versions

NodeSecure · Dec 7, 2024 · 6be3c4a · 6be3c4a
1 parent 63582d0
commit 6be3c4a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/public/components/views/search/search.css b/public/components/views/search/search.css
@@ -236,3 +236,8 @@ input:-webkit-autofill {
   background: #5468842a;
   cursor: pointer;
 }
+
+.spinner-option {
+  font-size: smaller;
+  text-align: center;
+}
diff --git a/public/components/views/search/search.js b/public/components/views/search/search.js
@@ -102,15 +102,39 @@ export class SearchView {
         optionElement.textContent = version;
         selectElement.appendChild(optionElement);
         selectElement.addEventListener("click", async() => {
-          const versions = await this.fetchPackageVersions(name);
-          for (const pkgVersion of versions) {
-            if (pkgVersion === version) {
-              continue;
+          const spinnerOption = "<option value=\"\" disabled class=\"spinner-option\">.</option>";
+          selectElement.insertAdjacentHTML("beforeend", spinnerOption);
+
+          function spinnerOptionSpin() {
+            const spinnerOptionElement = selectElement.querySelector(".spinner-option");
+            spinnerOptionElement.textContent += ".";
+            if (spinnerOptionElement.textContent.length > 3) {
+              spinnerOptionElement.textContent = ".";
             }
-            const optionElement = document.createElement("option");
-            optionElement.value = pkgVersion;
-            optionElement.textContent = pkgVersion;
-            selectElement.appendChild(optionElement);
+          }
+
+          const spinIntervalId = setInterval(spinnerOptionSpin, 180);
+
+          try {
+            const versions = await this.fetchPackageVersions(name);
+
+            clearInterval(spinIntervalId);
+
+            selectElement.querySelector(".spinner-option").remove();
+
+            for (const pkgVersion of versions) {
+              if (pkgVersion === version) {
+                continue;
+              }
+              const optionElement = document.createElement("option");
+              optionElement.value = pkgVersion;
+              optionElement.textContent = pkgVersion;
+              selectElement.appendChild(optionElement);
+            }
+          }
+          catch {
+            clearInterval(spinIntervalId);
+            selectElement.querySelector(".spinner-option").remove();
           }
         }, { once: true });
         divResultElement.appendChild(selectElement);