fix: make sure hiding search icon before showing spinner icon

style: change spinner icon size to 1.35em
hugomods · Feb 20, 2024 · b6ce6ed · b6ce6ed
1 parent a33e085
commit b6ce6ed
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/assets/search/js/form.ts b/assets/search/js/form.ts
@@ -201,6 +201,7 @@ export default class Form {
             })
         })
 
+        this.spinner.show()
         engine.init().then(() => {
             this.input.removeAttribute('disabled')
         }).catch((err) => {

diff --git a/assets/search/js/spinner.ts b/assets/search/js/spinner.ts
@@ -31,6 +31,9 @@ export default class Spinner {
 
     show() {
         this.getSearchIcon().classList.add('disabled')
-        this.getElement().classList.remove('disabled')
+        // delay for making sure the search icon was hidden.
+        setTimeout(() => {
+            this.getElement().classList.remove('disabled')
+        }, 1)
     }
 }
diff --git a/layouts/partials/search/assets/js-resource.html b/layouts/partials/search/assets/js-resource.html
@@ -59,7 +59,7 @@
   "history" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "clock" "size" "2em"))
   "meta" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "info-circle" "size" "2em"))
   "search" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "search" "size" "1.25em"))
-  "spinner" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "arrow-clockwise" "size" "1.25em"))
+  "spinner" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "arrow-clockwise" "size" "1.35em"))
   "lang" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "translate" "size" "1em"))
   "sort" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "sort-down" "size" "1em"))
   "expand" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "chevron-expand" "size" "1em"))