@blotoutio/providers-evo-search-sdk 1.54.0 → 1.55.0

package/index.cjs.js

@@ -6118,6 +6118,78 @@ const handpickedProductsStyles = i$3 `
   .scroll-button-right {
     right: 1em;
   }
+
+  .skeleton-card {
+    display: flex;
+    width: 10em;
+    height: 13.125em;
+    padding: 0.625em 0;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.625em;
+    border-radius: 0.375em;
+    border: 0.0625em solid #cbd5e1;
+    background: white;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
+  .skeleton-image {
+    width: 5.875em;
+    height: 6.25em;
+    border-radius: 0.25em;
+    flex-shrink: 0;
+    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
+    background-size: 200% 100%;
+    animation: shimmer 1.4s ease-in-out infinite;
+  }
+
+  .skeleton-separator {
+    width: 100%;
+    height: 0.0625em;
+    background-color: #cbd5e1;
+    flex-shrink: 0;
+  }
+
+  .skeleton-details {
+    display: flex;
+    height: 4.25em;
+    padding: 0 0.5em;
+    flex-direction: column;
+    gap: 0.375em;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .skeleton-line {
+    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
+    background-size: 200% 100%;
+    animation: shimmer 1.4s ease-in-out infinite;
+    border-radius: 0.1875em;
+    height: 0.75em;
+  }
+
+  .skeleton-line-name {
+    width: 80%;
+  }
+
+  .skeleton-line-desc {
+    width: 95%;
+  }
+
+  .skeleton-line-price {
+    width: 40%;
+    margin-top: auto;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
 `;
 
 class HandpickedProducts extends ElementWithStylesheet {
@@ -6126,6 +6198,7 @@ class HandpickedProducts extends ElementWithStylesheet {
         this.products = [];
         this.trendingTitle = 'Handpicked for you';
         this.isSearchResults = false;
+        this.loading = false;
         this.canScrollLeft = false;
         this.canScrollRight = true;
     }
@@ -6168,69 +6241,98 @@ class HandpickedProducts extends ElementWithStylesheet {
         (_a = this.carousel) === null || _a === void 0 ? void 0 : _a.scrollBy({ left: 170, behavior: 'smooth' });
         setTimeout(() => this.updateScrollButtons(), 300);
     }
+    renderSkeleton() {
+        const skeletonCount = 5;
+        return b `
+      <div class="products-carousel">
+        ${Array.from({ length: skeletonCount }, () => b `
+            <div class="skeleton-card" aria-hidden="true">
+              <div class="skeleton-image"></div>
+              <div class="skeleton-separator"></div>
+              <div class="skeleton-details">
+                <div class="skeleton-line skeleton-line-name"></div>
+                <div class="skeleton-line skeleton-line-desc"></div>
+                <div class="skeleton-line skeleton-line-price"></div>
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
+    }
     render() {
-        if (!this.products.length) {
+        if (!this.products.length && !this.loading) {
             return b ``;
         }
+        const showSearchHeader = this.loading || this.isSearchResults;
         return b `
-      <div class="handpicked-products-container">
+      <div
+        class="handpicked-products-container"
+        aria-busy=${this.loading ? 'true' : 'false'}
+      >
         <h3 class="handpicked-title">
           <div class="icon-container">
             <bt-lucide-icon
-              name=${this.isSearchResults ? 'search' : 'handHeart'}
+              name=${showSearchHeader ? 'search' : 'handHeart'}
               width="16"
               height="16"
               stroke="#EF4444"
               stroke-width="1"
             ></bt-lucide-icon>
           </div>
-          ${this.isSearchResults ? 'Matching Products' : this.trendingTitle}
+          ${showSearchHeader ? 'Matching Products' : this.trendingTitle}
         </h3>
 
         <div class="carousel-wrapper">
-          ${this.canScrollLeft
-            ? b `
-                <button
-                  class="scroll-button scroll-button-left"
-                  @click=${this.handleScrollLeft}
-                  aria-label="Scroll left"
-                >
-                  <bt-lucide-icon
-                    name="left"
-                    width="20"
-                    height="20"
-                    stroke="#000000"
-                  ></bt-lucide-icon>
-                </button>
-              `
-            : A}
-
-          <div class="products-carousel" @scroll=${this.updateScrollButtons}>
-            ${this.products.map((product) => b `
-                <evs-product-card
-                  .css=${this.css}
-                  .product=${product}
-                  .userId=${this.userId}
-                ></evs-product-card>
-              `)}
-          </div>
-
-          ${this.canScrollRight
-            ? b `
-                <button
-                  class="scroll-button scroll-button-right"
-                  @click=${this.handleScrollRight}
-                  aria-label="Scroll right"
+          ${this.loading
+            ? this.renderSkeleton()
+            : b `
+                ${this.canScrollLeft
+                ? b `
+                      <button
+                        class="scroll-button scroll-button-left"
+                        @click=${this.handleScrollLeft}
+                        aria-label="Scroll left"
+                      >
+                        <bt-lucide-icon
+                          name="left"
+                          width="20"
+                          height="20"
+                          stroke="#000000"
+                        ></bt-lucide-icon>
+                      </button>
+                    `
+                : A}
+
+                <div
+                  class="products-carousel"
+                  @scroll=${this.updateScrollButtons}
                 >
-                  <bt-lucide-icon
-                    name="right"
-                    width="20"
-                    height="20"
-                    stroke="#000000"
-                  ></bt-lucide-icon>
-                </button>
-              `
-            : A}
+                  ${this.products.map((product) => b `
+                      <evs-product-card
+                        .css=${this.css}
+                        .product=${product}
+                        .userId=${this.userId}
+                      ></evs-product-card>
+                    `)}
+                </div>
+
+                ${this.canScrollRight
+                ? b `
+                      <button
+                        class="scroll-button scroll-button-right"
+                        @click=${this.handleScrollRight}
+                        aria-label="Scroll right"
+                      >
+                        <bt-lucide-icon
+                          name="right"
+                          width="20"
+                          height="20"
+                          stroke="#000000"
+                        ></bt-lucide-icon>
+                      </button>
+                    `
+                : A}
+              `}
         </div>
       </div>
     `;
@@ -6249,6 +6351,10 @@ __decorate([
     n$1({ type: Boolean }),
     __metadata("design:type", Object)
 ], HandpickedProducts.prototype, "isSearchResults", void 0);
+__decorate([
+    n$1({ type: Boolean }),
+    __metadata("design:type", Object)
+], HandpickedProducts.prototype, "loading", void 0);
 __decorate([
     n$1({ type: String }),
     __metadata("design:type", Object)
@@ -6310,6 +6416,34 @@ const searchDropdownStyles = i$3 `
     }
   }
 
+  .progress-bar {
+    position: sticky;
+    top: 0;
+    height: 0.125em;
+    width: 100%;
+    background: var(--evosearch-border, #cbd5e1);
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  .progress-bar::after {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 40%;
+    background: var(--evosearch-accent, #ef4444);
+    animation: progress-slide 1.2s ease-in-out infinite;
+  }
+
+  @keyframes progress-slide {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(250%);
+    }
+  }
+
   /* Empty State */
   .dropdown-empty {
     display: flex;
@@ -6500,10 +6634,13 @@ class SearchDropdown extends ElementWithStylesheet {
         const hasContent = this.suggestions.length > 0;
         return b `
       <div class="dropdown-container">
-        ${this.loading
-            ? this.renderLoading()
-            : hasContent
-                ? this.renderSuggestions()
+        ${this.loading && hasContent
+            ? b `<div class="progress-bar" aria-hidden="true"></div>`
+            : A}
+        ${hasContent
+            ? this.renderSuggestions()
+            : this.loading
+                ? this.renderLoading()
                 : this.renderEmpty()}
       </div>
     `;
@@ -6752,6 +6889,7 @@ class SearchWidget extends ElementWithStylesheet {
         clearTimeout(this.autocompleteTimer);
         if (query.length > 2) {
             this.dropdownVisible = true;
+            this.dropdownLoading = true;
             this.performSearch(query);
         }
         this.dispatchEvent(new CustomEvent('search-submit', {
@@ -6777,6 +6915,7 @@ class SearchWidget extends ElementWithStylesheet {
         }, 0);
         if (suggestion.length > 2) {
             this.dropdownVisible = true;
+            this.dropdownLoading = true;
             this.performSearch(suggestion);
         }
         this.dispatchEvent(new CustomEvent('search-submit', {
@@ -6857,6 +6996,7 @@ class SearchWidget extends ElementWithStylesheet {
             : this.handpickedProducts}
             .isSearchResults=${this.dropdownVisible &&
             this.searchProducts.length > 0}
+            .loading=${this.dropdownVisible && this.dropdownLoading}
             .trendingTitle=${this.handpickedProductsTitle}
             .userId=${this.userId}
           ></evs-handpicked>

package/index.js

@@ -6119,6 +6119,78 @@ var ProvidersEvoSearchSdk = (function () {
   .scroll-button-right {
     right: 1em;
   }
+
+  .skeleton-card {
+    display: flex;
+    width: 10em;
+    height: 13.125em;
+    padding: 0.625em 0;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.625em;
+    border-radius: 0.375em;
+    border: 0.0625em solid #cbd5e1;
+    background: white;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
+  .skeleton-image {
+    width: 5.875em;
+    height: 6.25em;
+    border-radius: 0.25em;
+    flex-shrink: 0;
+    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
+    background-size: 200% 100%;
+    animation: shimmer 1.4s ease-in-out infinite;
+  }
+
+  .skeleton-separator {
+    width: 100%;
+    height: 0.0625em;
+    background-color: #cbd5e1;
+    flex-shrink: 0;
+  }
+
+  .skeleton-details {
+    display: flex;
+    height: 4.25em;
+    padding: 0 0.5em;
+    flex-direction: column;
+    gap: 0.375em;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .skeleton-line {
+    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
+    background-size: 200% 100%;
+    animation: shimmer 1.4s ease-in-out infinite;
+    border-radius: 0.1875em;
+    height: 0.75em;
+  }
+
+  .skeleton-line-name {
+    width: 80%;
+  }
+
+  .skeleton-line-desc {
+    width: 95%;
+  }
+
+  .skeleton-line-price {
+    width: 40%;
+    margin-top: auto;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
 `;
 
     class HandpickedProducts extends ElementWithStylesheet {
@@ -6127,6 +6199,7 @@ var ProvidersEvoSearchSdk = (function () {
             this.products = [];
             this.trendingTitle = 'Handpicked for you';
             this.isSearchResults = false;
+            this.loading = false;
             this.canScrollLeft = false;
             this.canScrollRight = true;
         }
@@ -6169,69 +6242,98 @@ var ProvidersEvoSearchSdk = (function () {
             (_a = this.carousel) === null || _a === void 0 ? void 0 : _a.scrollBy({ left: 170, behavior: 'smooth' });
             setTimeout(() => this.updateScrollButtons(), 300);
         }
+        renderSkeleton() {
+            const skeletonCount = 5;
+            return b `
+      <div class="products-carousel">
+        ${Array.from({ length: skeletonCount }, () => b `
+            <div class="skeleton-card" aria-hidden="true">
+              <div class="skeleton-image"></div>
+              <div class="skeleton-separator"></div>
+              <div class="skeleton-details">
+                <div class="skeleton-line skeleton-line-name"></div>
+                <div class="skeleton-line skeleton-line-desc"></div>
+                <div class="skeleton-line skeleton-line-price"></div>
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
+        }
         render() {
-            if (!this.products.length) {
+            if (!this.products.length && !this.loading) {
                 return b ``;
             }
+            const showSearchHeader = this.loading || this.isSearchResults;
             return b `
-      <div class="handpicked-products-container">
+      <div
+        class="handpicked-products-container"
+        aria-busy=${this.loading ? 'true' : 'false'}
+      >
         <h3 class="handpicked-title">
           <div class="icon-container">
             <bt-lucide-icon
-              name=${this.isSearchResults ? 'search' : 'handHeart'}
+              name=${showSearchHeader ? 'search' : 'handHeart'}
               width="16"
               height="16"
               stroke="#EF4444"
               stroke-width="1"
             ></bt-lucide-icon>
           </div>
-          ${this.isSearchResults ? 'Matching Products' : this.trendingTitle}
+          ${showSearchHeader ? 'Matching Products' : this.trendingTitle}
         </h3>
 
         <div class="carousel-wrapper">
-          ${this.canScrollLeft
-            ? b `
-                <button
-                  class="scroll-button scroll-button-left"
-                  @click=${this.handleScrollLeft}
-                  aria-label="Scroll left"
-                >
-                  <bt-lucide-icon
-                    name="left"
-                    width="20"
-                    height="20"
-                    stroke="#000000"
-                  ></bt-lucide-icon>
-                </button>
-              `
-            : A}
-
-          <div class="products-carousel" @scroll=${this.updateScrollButtons}>
-            ${this.products.map((product) => b `
-                <evs-product-card
-                  .css=${this.css}
-                  .product=${product}
-                  .userId=${this.userId}
-                ></evs-product-card>
-              `)}
-          </div>
-
-          ${this.canScrollRight
-            ? b `
-                <button
-                  class="scroll-button scroll-button-right"
-                  @click=${this.handleScrollRight}
-                  aria-label="Scroll right"
+          ${this.loading
+            ? this.renderSkeleton()
+            : b `
+                ${this.canScrollLeft
+                ? b `
+                      <button
+                        class="scroll-button scroll-button-left"
+                        @click=${this.handleScrollLeft}
+                        aria-label="Scroll left"
+                      >
+                        <bt-lucide-icon
+                          name="left"
+                          width="20"
+                          height="20"
+                          stroke="#000000"
+                        ></bt-lucide-icon>
+                      </button>
+                    `
+                : A}
+
+                <div
+                  class="products-carousel"
+                  @scroll=${this.updateScrollButtons}
                 >
-                  <bt-lucide-icon
-                    name="right"
-                    width="20"
-                    height="20"
-                    stroke="#000000"
-                  ></bt-lucide-icon>
-                </button>
-              `
-            : A}
+                  ${this.products.map((product) => b `
+                      <evs-product-card
+                        .css=${this.css}
+                        .product=${product}
+                        .userId=${this.userId}
+                      ></evs-product-card>
+                    `)}
+                </div>
+
+                ${this.canScrollRight
+                ? b `
+                      <button
+                        class="scroll-button scroll-button-right"
+                        @click=${this.handleScrollRight}
+                        aria-label="Scroll right"
+                      >
+                        <bt-lucide-icon
+                          name="right"
+                          width="20"
+                          height="20"
+                          stroke="#000000"
+                        ></bt-lucide-icon>
+                      </button>
+                    `
+                : A}
+              `}
         </div>
       </div>
     `;
@@ -6250,6 +6352,10 @@ var ProvidersEvoSearchSdk = (function () {
         n$1({ type: Boolean }),
         __metadata("design:type", Object)
     ], HandpickedProducts.prototype, "isSearchResults", void 0);
+    __decorate([
+        n$1({ type: Boolean }),
+        __metadata("design:type", Object)
+    ], HandpickedProducts.prototype, "loading", void 0);
     __decorate([
         n$1({ type: String }),
         __metadata("design:type", Object)
@@ -6311,6 +6417,34 @@ var ProvidersEvoSearchSdk = (function () {
     }
   }
 
+  .progress-bar {
+    position: sticky;
+    top: 0;
+    height: 0.125em;
+    width: 100%;
+    background: var(--evosearch-border, #cbd5e1);
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  .progress-bar::after {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 40%;
+    background: var(--evosearch-accent, #ef4444);
+    animation: progress-slide 1.2s ease-in-out infinite;
+  }
+
+  @keyframes progress-slide {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(250%);
+    }
+  }
+
   /* Empty State */
   .dropdown-empty {
     display: flex;
@@ -6501,10 +6635,13 @@ var ProvidersEvoSearchSdk = (function () {
             const hasContent = this.suggestions.length > 0;
             return b `
       <div class="dropdown-container">
-        ${this.loading
-            ? this.renderLoading()
-            : hasContent
-                ? this.renderSuggestions()
+        ${this.loading && hasContent
+            ? b `<div class="progress-bar" aria-hidden="true"></div>`
+            : A}
+        ${hasContent
+            ? this.renderSuggestions()
+            : this.loading
+                ? this.renderLoading()
                 : this.renderEmpty()}
       </div>
     `;
@@ -6753,6 +6890,7 @@ var ProvidersEvoSearchSdk = (function () {
             clearTimeout(this.autocompleteTimer);
             if (query.length > 2) {
                 this.dropdownVisible = true;
+                this.dropdownLoading = true;
                 this.performSearch(query);
             }
             this.dispatchEvent(new CustomEvent('search-submit', {
@@ -6778,6 +6916,7 @@ var ProvidersEvoSearchSdk = (function () {
             }, 0);
             if (suggestion.length > 2) {
                 this.dropdownVisible = true;
+                this.dropdownLoading = true;
                 this.performSearch(suggestion);
             }
             this.dispatchEvent(new CustomEvent('search-submit', {
@@ -6858,6 +6997,7 @@ var ProvidersEvoSearchSdk = (function () {
             : this.handpickedProducts}
             .isSearchResults=${this.dropdownVisible &&
             this.searchProducts.length > 0}
+            .loading=${this.dropdownVisible && this.dropdownLoading}
             .trendingTitle=${this.handpickedProductsTitle}
             .userId=${this.userId}
           ></evs-handpicked>

package/index.mjs

@@ -6116,6 +6116,78 @@ const handpickedProductsStyles = i$3 `
   .scroll-button-right {
     right: 1em;
   }
+
+  .skeleton-card {
+    display: flex;
+    width: 10em;
+    height: 13.125em;
+    padding: 0.625em 0;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.625em;
+    border-radius: 0.375em;
+    border: 0.0625em solid #cbd5e1;
+    background: white;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
+  .skeleton-image {
+    width: 5.875em;
+    height: 6.25em;
+    border-radius: 0.25em;
+    flex-shrink: 0;
+    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
+    background-size: 200% 100%;
+    animation: shimmer 1.4s ease-in-out infinite;
+  }
+
+  .skeleton-separator {
+    width: 100%;
+    height: 0.0625em;
+    background-color: #cbd5e1;
+    flex-shrink: 0;
+  }
+
+  .skeleton-details {
+    display: flex;
+    height: 4.25em;
+    padding: 0 0.5em;
+    flex-direction: column;
+    gap: 0.375em;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .skeleton-line {
+    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
+    background-size: 200% 100%;
+    animation: shimmer 1.4s ease-in-out infinite;
+    border-radius: 0.1875em;
+    height: 0.75em;
+  }
+
+  .skeleton-line-name {
+    width: 80%;
+  }
+
+  .skeleton-line-desc {
+    width: 95%;
+  }
+
+  .skeleton-line-price {
+    width: 40%;
+    margin-top: auto;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
 `;
 
 class HandpickedProducts extends ElementWithStylesheet {
@@ -6124,6 +6196,7 @@ class HandpickedProducts extends ElementWithStylesheet {
         this.products = [];
         this.trendingTitle = 'Handpicked for you';
         this.isSearchResults = false;
+        this.loading = false;
         this.canScrollLeft = false;
         this.canScrollRight = true;
     }
@@ -6166,69 +6239,98 @@ class HandpickedProducts extends ElementWithStylesheet {
         (_a = this.carousel) === null || _a === void 0 ? void 0 : _a.scrollBy({ left: 170, behavior: 'smooth' });
         setTimeout(() => this.updateScrollButtons(), 300);
     }
+    renderSkeleton() {
+        const skeletonCount = 5;
+        return b `
+      <div class="products-carousel">
+        ${Array.from({ length: skeletonCount }, () => b `
+            <div class="skeleton-card" aria-hidden="true">
+              <div class="skeleton-image"></div>
+              <div class="skeleton-separator"></div>
+              <div class="skeleton-details">
+                <div class="skeleton-line skeleton-line-name"></div>
+                <div class="skeleton-line skeleton-line-desc"></div>
+                <div class="skeleton-line skeleton-line-price"></div>
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
+    }
     render() {
-        if (!this.products.length) {
+        if (!this.products.length && !this.loading) {
             return b ``;
         }
+        const showSearchHeader = this.loading || this.isSearchResults;
         return b `
-      <div class="handpicked-products-container">
+      <div
+        class="handpicked-products-container"
+        aria-busy=${this.loading ? 'true' : 'false'}
+      >
         <h3 class="handpicked-title">
           <div class="icon-container">
             <bt-lucide-icon
-              name=${this.isSearchResults ? 'search' : 'handHeart'}
+              name=${showSearchHeader ? 'search' : 'handHeart'}
               width="16"
               height="16"
               stroke="#EF4444"
               stroke-width="1"
             ></bt-lucide-icon>
           </div>
-          ${this.isSearchResults ? 'Matching Products' : this.trendingTitle}
+          ${showSearchHeader ? 'Matching Products' : this.trendingTitle}
         </h3>
 
         <div class="carousel-wrapper">
-          ${this.canScrollLeft
-            ? b `
-                <button
-                  class="scroll-button scroll-button-left"
-                  @click=${this.handleScrollLeft}
-                  aria-label="Scroll left"
-                >
-                  <bt-lucide-icon
-                    name="left"
-                    width="20"
-                    height="20"
-                    stroke="#000000"
-                  ></bt-lucide-icon>
-                </button>
-              `
-            : A}
-
-          <div class="products-carousel" @scroll=${this.updateScrollButtons}>
-            ${this.products.map((product) => b `
-                <evs-product-card
-                  .css=${this.css}
-                  .product=${product}
-                  .userId=${this.userId}
-                ></evs-product-card>
-              `)}
-          </div>
-
-          ${this.canScrollRight
-            ? b `
-                <button
-                  class="scroll-button scroll-button-right"
-                  @click=${this.handleScrollRight}
-                  aria-label="Scroll right"
+          ${this.loading
+            ? this.renderSkeleton()
+            : b `
+                ${this.canScrollLeft
+                ? b `
+                      <button
+                        class="scroll-button scroll-button-left"
+                        @click=${this.handleScrollLeft}
+                        aria-label="Scroll left"
+                      >
+                        <bt-lucide-icon
+                          name="left"
+                          width="20"
+                          height="20"
+                          stroke="#000000"
+                        ></bt-lucide-icon>
+                      </button>
+                    `
+                : A}
+
+                <div
+                  class="products-carousel"
+                  @scroll=${this.updateScrollButtons}
                 >
-                  <bt-lucide-icon
-                    name="right"
-                    width="20"
-                    height="20"
-                    stroke="#000000"
-                  ></bt-lucide-icon>
-                </button>
-              `
-            : A}
+                  ${this.products.map((product) => b `
+                      <evs-product-card
+                        .css=${this.css}
+                        .product=${product}
+                        .userId=${this.userId}
+                      ></evs-product-card>
+                    `)}
+                </div>
+
+                ${this.canScrollRight
+                ? b `
+                      <button
+                        class="scroll-button scroll-button-right"
+                        @click=${this.handleScrollRight}
+                        aria-label="Scroll right"
+                      >
+                        <bt-lucide-icon
+                          name="right"
+                          width="20"
+                          height="20"
+                          stroke="#000000"
+                        ></bt-lucide-icon>
+                      </button>
+                    `
+                : A}
+              `}
         </div>
       </div>
     `;
@@ -6247,6 +6349,10 @@ __decorate([
     n$1({ type: Boolean }),
     __metadata("design:type", Object)
 ], HandpickedProducts.prototype, "isSearchResults", void 0);
+__decorate([
+    n$1({ type: Boolean }),
+    __metadata("design:type", Object)
+], HandpickedProducts.prototype, "loading", void 0);
 __decorate([
     n$1({ type: String }),
     __metadata("design:type", Object)
@@ -6308,6 +6414,34 @@ const searchDropdownStyles = i$3 `
     }
   }
 
+  .progress-bar {
+    position: sticky;
+    top: 0;
+    height: 0.125em;
+    width: 100%;
+    background: var(--evosearch-border, #cbd5e1);
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  .progress-bar::after {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 40%;
+    background: var(--evosearch-accent, #ef4444);
+    animation: progress-slide 1.2s ease-in-out infinite;
+  }
+
+  @keyframes progress-slide {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(250%);
+    }
+  }
+
   /* Empty State */
   .dropdown-empty {
     display: flex;
@@ -6498,10 +6632,13 @@ class SearchDropdown extends ElementWithStylesheet {
         const hasContent = this.suggestions.length > 0;
         return b `
       <div class="dropdown-container">
-        ${this.loading
-            ? this.renderLoading()
-            : hasContent
-                ? this.renderSuggestions()
+        ${this.loading && hasContent
+            ? b `<div class="progress-bar" aria-hidden="true"></div>`
+            : A}
+        ${hasContent
+            ? this.renderSuggestions()
+            : this.loading
+                ? this.renderLoading()
                 : this.renderEmpty()}
       </div>
     `;
@@ -6750,6 +6887,7 @@ class SearchWidget extends ElementWithStylesheet {
         clearTimeout(this.autocompleteTimer);
         if (query.length > 2) {
             this.dropdownVisible = true;
+            this.dropdownLoading = true;
             this.performSearch(query);
         }
         this.dispatchEvent(new CustomEvent('search-submit', {
@@ -6775,6 +6913,7 @@ class SearchWidget extends ElementWithStylesheet {
         }, 0);
         if (suggestion.length > 2) {
             this.dropdownVisible = true;
+            this.dropdownLoading = true;
             this.performSearch(suggestion);
         }
         this.dispatchEvent(new CustomEvent('search-submit', {
@@ -6855,6 +6994,7 @@ class SearchWidget extends ElementWithStylesheet {
             : this.handpickedProducts}
             .isSearchResults=${this.dropdownVisible &&
             this.searchProducts.length > 0}
+            .loading=${this.dropdownVisible && this.dropdownLoading}
             .trendingTitle=${this.handpickedProductsTitle}
             .userId=${this.userId}
           ></evs-handpicked>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blotoutio/providers-evo-search-sdk",
-  "version": "1.54.0",
+  "version": "1.55.0",
   "description": "Evo Search SDK for EdgeTag",
   "author": "Blotout",
   "license": "MIT",