Improve the performance of the hero search form.

hlxsites · Nov 29, 2023 · 0268be9 · 0268be9
1 parent 19453db
commit 0268be9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/blocks/hero/search/home.css b/blocks/hero/search/home.css
@@ -18,6 +18,11 @@
   display: none;
 }
 
+.hero.block .content .homes .search-bar .search-country-select-parent {
+  position: relative;
+  width: 80px;
+}
+
 .hero.block .content .homes .search-bar .suggester-input {
   flex: 1;
 }
@@ -45,7 +50,7 @@
   justify-content: center;
 }
 
-.hero.block .content .homes .search-bar .filter span.icon svg {
+.hero.block .content .homes .search-bar .filter span.icon img {
   height: 22px;
   width: 22px;
   color: var(--black);

diff --git a/blocks/hero/search/home.js b/blocks/hero/search/home.js
@@ -5,7 +5,7 @@ import {
 
 function observeForm() {
   const script = document.createElement('script');
-  script.type = 'text/partytown';
+  script.type = 'module';
   script.innerHTML = `
     const script = document.createElement('script');
     script.type = 'module';
@@ -76,6 +76,7 @@ async function buildForm() {
     </div>
     <div class="search-bar" role="search">
       <div class="search-suggester">
+        <div class="search-country-select-parent"></div>
         <div class="suggester-input">
           <input type="text" placeholder="${getPlaceholder()}" aria-label="${getPlaceholder()}" name="keyword">
           <input type="hidden" name="query">
@@ -113,12 +114,12 @@ async function buildForm() {
     input.setAttribute('aria-label', placeholder);
   };
 
-  const countrySelect = await buildCountrySelect(changeCountry);
-  if (countrySelect) {
-    form.querySelector('.search-suggester').prepend(countrySelect);
-  }
-  decorateIcons(form);
-  observeForm();
+  buildCountrySelect(changeCountry).then((select) => {
+    if (select) {
+      form.querySelector('.search-country-select-parent').append(select);
+    }
+  });
+  window.setTimeout(observeForm, 3000);
   return form;
 }
 

diff --git a/blocks/shared/search-countries/search-countries.js b/blocks/shared/search-countries/search-countries.js
@@ -108,7 +108,7 @@ export async function build(...callbacks) {
   selected.classList.add('selected');
   selected.setAttribute('aria-haspopup', 'listbox');
   selected.setAttribute('aria-expanded', 'false');
-  selected.setAttribute('aria-label', 'Select Country');
+  selected.setAttribute('aria-label', `${first.value} - Select Country`);
   selected.setAttribute('role', 'button');
   selected.setAttribute('tabIndex', '0');
   selected.innerHTML = imgHTML(first.value);