@bonlineza/luxity-lib 2.38.2 → 2.39.0

package/LuxityDesktopHeader.js

@@ -82,10 +82,22 @@
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
+
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
 
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
+
   function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
@@ -133,6 +145,10 @@
     return arr2;
   }
 
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
   function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
@@ -298,7 +314,7 @@
   };
 
   var SearchResults = function SearchResults(_ref) {
-    var _searchResults$brands, _searchResults$produc, _initialSearchData$tr, _initialSearchData$la, _limitBrands, _limitBrands2, _initialSearchData$la2, _searchResults$produc2;
+    var _searchResults$brands, _searchResults$produc, _initialSearchData$tr, _initialSearchData$la;
 
     var searchValue = _ref.searchValue,
         searchResults = _ref.searchResults,
@@ -315,7 +331,9 @@
         onBrandSearchResultClick = _ref.onBrandSearchResultClick,
         onCreateInterests = _ref.onCreateInterests,
         noResultsImage = _ref.noResultsImage,
-        showNoResults = _ref.showNoResults;
+        showNoResults = _ref.showNoResults,
+        _ref$isLoading = _ref.isLoading,
+        isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -354,6 +372,39 @@
       return "".concat(currencySymbol).concat(formatter.format(price));
     };
 
+    var renderBrandSkeleton = function renderBrandSkeleton() {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }));
+    };
+
+    var renderProductSkeleton = function renderProductSkeleton() {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _toConsumableArray(Array(3)).map(function (_, index) {
+        return /*#__PURE__*/React__default.createElement("div", {
+          key: index,
+          className: "product-skeleton"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__image shimmer"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__content"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__title shimmer"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__subtitle shimmer"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__price shimmer"
+        })));
+      }));
+    };
+
     var renderProductCard = function renderProductCard(product) {
       var selectedPrice = product.prices ? product.prices.find(function (p) {
         return p.currency === currency;
@@ -423,6 +474,70 @@
       }
 
       return brands;
+    };
+
+    var renderBrandsList = function renderBrandsList() {
+      var _limitBrands2;
+
+      if (isLoading) {
+        return renderBrandSkeleton();
+      }
+
+      if (shouldShowInitialData) {
+        var _limitBrands;
+
+        return (_limitBrands = limitBrands(initialSearchData === null || initialSearchData === void 0 ? void 0 : initialSearchData.trending_brands)) === null || _limitBrands === void 0 ? void 0 : _limitBrands.map(function (brand) {
+          return /*#__PURE__*/React__default.createElement("a", {
+            key: brand.id,
+            href: getBrandLink(brand),
+            className: "search-results__item",
+            onClick: function onClick() {
+              if (typeof onBrandSearchResultClick === 'function') {
+                onBrandSearchResultClick({
+                  brand_name: brand.name,
+                  brand_link: getBrandLink(brand),
+                  search_string: searchValue,
+                  is_trending: true
+                });
+              }
+            }
+          }, brand.name);
+        });
+      }
+
+      return (_limitBrands2 = limitBrands(searchResults === null || searchResults === void 0 ? void 0 : searchResults.brands)) === null || _limitBrands2 === void 0 ? void 0 : _limitBrands2.map(function (brand) {
+        return /*#__PURE__*/React__default.createElement("a", {
+          key: brand.link,
+          href: brand.link,
+          className: "search-results__item",
+          onClick: function onClick() {
+            if (typeof onBrandSearchResultClick === 'function') {
+              onBrandSearchResultClick({
+                brand_name: brand.name,
+                brand_link: brand.link,
+                search_string: searchValue,
+                is_trending: false
+              });
+            }
+          }
+        }, brand.name);
+      });
+    };
+
+    var renderProductsList = function renderProductsList() {
+      var _searchResults$produc2;
+
+      if (isLoading) {
+        return renderProductSkeleton();
+      }
+
+      if (shouldShowInitialData) {
+        var _initialSearchData$la2;
+
+        return initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la2 = initialSearchData.latest_products) === null || _initialSearchData$la2 === void 0 ? void 0 : _initialSearchData$la2.map(renderProductCard);
+      }
+
+      return searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.map(renderProductCard);
     }; // Show no results state
 
 
@@ -463,39 +578,7 @@
       className: "search-results__header"
     }, shouldShowInitialData ? 'TRENDING SEARCHES' : 'BRANDS'), /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__list"
-    }, shouldShowInitialData ? (_limitBrands = limitBrands(initialSearchData === null || initialSearchData === void 0 ? void 0 : initialSearchData.trending_brands)) === null || _limitBrands === void 0 ? void 0 : _limitBrands.map(function (brand) {
-      return /*#__PURE__*/React__default.createElement("a", {
-        key: brand.id,
-        href: getBrandLink(brand),
-        className: "search-results__item",
-        onClick: function onClick() {
-          if (typeof onBrandSearchResultClick === 'function') {
-            onBrandSearchResultClick({
-              brand_name: brand.name,
-              brand_link: getBrandLink(brand),
-              search_string: searchValue,
-              is_trending: true
-            });
-          }
-        }
-      }, brand.name);
-    }) : (_limitBrands2 = limitBrands(searchResults === null || searchResults === void 0 ? void 0 : searchResults.brands)) === null || _limitBrands2 === void 0 ? void 0 : _limitBrands2.map(function (brand) {
-      return /*#__PURE__*/React__default.createElement("a", {
-        key: brand.link,
-        href: brand.link,
-        className: "search-results__item",
-        onClick: function onClick() {
-          if (typeof onBrandSearchResultClick === 'function') {
-            onBrandSearchResultClick({
-              brand_name: brand.name,
-              brand_link: brand.link,
-              search_string: searchValue,
-              is_trending: false
-            });
-          }
-        }
-      }, brand.name);
-    }))), /*#__PURE__*/React__default.createElement("div", {
+    }, renderBrandsList())), /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__section"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__section-header"
@@ -509,7 +592,7 @@
       }
     }, "View all items")), /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__product-list"
-    }, shouldShowInitialData ? initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la2 = initialSearchData.latest_products) === null || _initialSearchData$la2 === void 0 ? void 0 : _initialSearchData$la2.map(renderProductCard) : searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.map(renderProductCard)), /*#__PURE__*/React__default.createElement("button", {
+    }, renderProductsList()), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "search-results__view-all-button",
       onClick: function onClick() {
@@ -835,7 +918,12 @@
         if (currentSearchRequestToken.current === newSearchToken) {
           var _brandsResponse$data$, _productsResponse$dat, _productsResponse$dat2;
 
-          // Extract brands from aggregations
+          // Set loading to false when search completes
+          if (typeof onSearchLoading === 'function') {
+            onSearchLoading(false);
+          } // Extract brands from aggregations
+
+
           var brandsData = ((_brandsResponse$data$ = brandsResponse.data.data.luxity_products_aggregations) === null || _brandsResponse$data$ === void 0 ? void 0 : _brandsResponse$data$.luxity_brand) || []; // Extract products from filter
 
           var productsData = ((_productsResponse$dat = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat === void 0 ? void 0 : _productsResponse$dat.data) || [];
@@ -898,6 +986,11 @@
         }
       }).catch(function (error) {
         if (!axios.isCancel(error)) {
+          // Set loading to false when search fails
+          if (typeof onSearchLoading === 'function') {
+            onSearchLoading(false);
+          }
+
           setSearchResults({
             brands: [],
             products: []
@@ -1045,7 +1138,7 @@
         onSearchPreview = _ref.onSearchPreview,
         onProductSearchResultClick = _ref.onProductSearchResultClick,
         onBrandSearchResultClick = _ref.onBrandSearchResultClick,
-        onSearchLoading = _ref.onSearchLoading,
+        _onSearchLoading = _ref.onSearchLoading,
         currency = _ref.currency,
         currencySymbol = _ref.currencySymbol,
         currencyOptions = _ref.currencyOptions,
@@ -1075,53 +1168,64 @@
 
     var _useState5 = React.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
-        isSearchFocused = _useState6[0],
-        setIsSearchFocused = _useState6[1];
+        searchLoading = _useState6[0],
+        setSearchLoading = _useState6[1];
+
+    var _useState7 = React.useState(false),
+        _useState8 = _slicedToArray(_useState7, 2),
+        isSearchFocused = _useState8[0],
+        setIsSearchFocused = _useState8[1];
 
-    var _useState7 = React.useState({
+    var _useState9 = React.useState({
       trending_brands: [],
       latest_products: []
     }),
-        _useState8 = _slicedToArray(_useState7, 2),
-        initialSearchView = _useState8[0],
-        setInitialSearchView = _useState8[1];
-
-    var _useState9 = React.useState({}),
         _useState10 = _slicedToArray(_useState9, 2),
-        dropdownData = _useState10[0],
-        setDropdownData = _useState10[1];
+        initialSearchView = _useState10[0],
+        setInitialSearchView = _useState10[1];
 
-    var _useState11 = React.useState(false),
+    var _useState11 = React.useState({}),
         _useState12 = _slicedToArray(_useState11, 2),
-        hasError = _useState12[0],
-        setHasError = _useState12[1];
+        dropdownData = _useState12[0],
+        setDropdownData = _useState12[1];
 
-    var _useState13 = React.useState({
-      brands: [],
-      products: []
-    }),
+    var _useState13 = React.useState(false),
         _useState14 = _slicedToArray(_useState13, 2),
-        searchResults = _useState14[0],
-        setSearchResults = _useState14[1];
+        hasError = _useState14[0],
+        setHasError = _useState14[1];
 
     var _useState15 = React.useState({
       brands: [],
       products: []
     }),
         _useState16 = _slicedToArray(_useState15, 2),
-        cachedResults = _useState16[0],
-        setCachedResults = _useState16[1];
+        searchResults = _useState16[0],
+        setSearchResults = _useState16[1];
 
-    var _useState17 = React.useState(false),
+    var _useState17 = React.useState({
+      brands: [],
+      products: []
+    }),
         _useState18 = _slicedToArray(_useState17, 2),
-        showNoResults = _useState18[0],
-        setShowNoResults = _useState18[1];
+        cachedResults = _useState18[0],
+        setCachedResults = _useState18[1];
+
+    var _useState19 = React.useState(false),
+        _useState20 = _slicedToArray(_useState19, 2),
+        showNoResults = _useState20[0],
+        setShowNoResults = _useState20[1];
 
     var searchResultsRef = React.useRef(null);
 
     var _useSearch = useSearch({
       endpoint: endpoint,
-      onSearchLoading: onSearchLoading,
+      onSearchLoading: function onSearchLoading(isLoading) {
+        setSearchLoading(isLoading);
+
+        if (typeof _onSearchLoading === 'function') {
+          _onSearchLoading(isLoading);
+        }
+      },
       currency: currency,
       onSearchPreview: onSearchPreview,
       onNoResults: setShowNoResults
@@ -1276,7 +1380,8 @@
       onBrandSearchResultClick: onBrandSearchResultClick,
       onCreateInterests: onCreateInterests,
       noResultsImage: noResultsImage,
-      showNoResults: showNoResults
+      showNoResults: showNoResults,
+      isLoading: searchLoading
     }), /*#__PURE__*/React__default.createElement("nav", {
       className: "navbar__nav-links navbar__nav-links--wrap"
     }, renderDropdownLinks(), !!stores.length && /*#__PURE__*/React__default.createElement("li", {

package/LuxityMobileHeader.js

@@ -82,10 +82,22 @@
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
+
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
 
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
+
   function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
@@ -133,6 +145,10 @@
     return arr2;
   }
 
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
   function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
@@ -918,7 +934,7 @@
   };
 
   var SearchResults = function SearchResults(_ref) {
-    var _searchResults$brands, _searchResults$produc, _initialSearchData$tr, _initialSearchData$la, _limitBrands, _limitBrands2, _initialSearchData$la2, _searchResults$produc2;
+    var _searchResults$brands, _searchResults$produc, _initialSearchData$tr, _initialSearchData$la;
 
     var searchValue = _ref.searchValue,
         searchResults = _ref.searchResults,
@@ -935,7 +951,9 @@
         onBrandSearchResultClick = _ref.onBrandSearchResultClick,
         onCreateInterests = _ref.onCreateInterests,
         noResultsImage = _ref.noResultsImage,
-        showNoResults = _ref.showNoResults;
+        showNoResults = _ref.showNoResults,
+        _ref$isLoading = _ref.isLoading,
+        isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -974,6 +992,39 @@
       return "".concat(currencySymbol).concat(formatter.format(price));
     };
 
+    var renderBrandSkeleton = function renderBrandSkeleton() {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }));
+    };
+
+    var renderProductSkeleton = function renderProductSkeleton() {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _toConsumableArray(Array(3)).map(function (_, index) {
+        return /*#__PURE__*/React__default.createElement("div", {
+          key: index,
+          className: "product-skeleton"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__image shimmer"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__content"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__title shimmer"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__subtitle shimmer"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__price shimmer"
+        })));
+      }));
+    };
+
     var renderProductCard = function renderProductCard(product) {
       var selectedPrice = product.prices ? product.prices.find(function (p) {
         return p.currency === currency;
@@ -1043,6 +1094,70 @@
       }
 
       return brands;
+    };
+
+    var renderBrandsList = function renderBrandsList() {
+      var _limitBrands2;
+
+      if (isLoading) {
+        return renderBrandSkeleton();
+      }
+
+      if (shouldShowInitialData) {
+        var _limitBrands;
+
+        return (_limitBrands = limitBrands(initialSearchData === null || initialSearchData === void 0 ? void 0 : initialSearchData.trending_brands)) === null || _limitBrands === void 0 ? void 0 : _limitBrands.map(function (brand) {
+          return /*#__PURE__*/React__default.createElement("a", {
+            key: brand.id,
+            href: getBrandLink(brand),
+            className: "search-results__item",
+            onClick: function onClick() {
+              if (typeof onBrandSearchResultClick === 'function') {
+                onBrandSearchResultClick({
+                  brand_name: brand.name,
+                  brand_link: getBrandLink(brand),
+                  search_string: searchValue,
+                  is_trending: true
+                });
+              }
+            }
+          }, brand.name);
+        });
+      }
+
+      return (_limitBrands2 = limitBrands(searchResults === null || searchResults === void 0 ? void 0 : searchResults.brands)) === null || _limitBrands2 === void 0 ? void 0 : _limitBrands2.map(function (brand) {
+        return /*#__PURE__*/React__default.createElement("a", {
+          key: brand.link,
+          href: brand.link,
+          className: "search-results__item",
+          onClick: function onClick() {
+            if (typeof onBrandSearchResultClick === 'function') {
+              onBrandSearchResultClick({
+                brand_name: brand.name,
+                brand_link: brand.link,
+                search_string: searchValue,
+                is_trending: false
+              });
+            }
+          }
+        }, brand.name);
+      });
+    };
+
+    var renderProductsList = function renderProductsList() {
+      var _searchResults$produc2;
+
+      if (isLoading) {
+        return renderProductSkeleton();
+      }
+
+      if (shouldShowInitialData) {
+        var _initialSearchData$la2;
+
+        return initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la2 = initialSearchData.latest_products) === null || _initialSearchData$la2 === void 0 ? void 0 : _initialSearchData$la2.map(renderProductCard);
+      }
+
+      return searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.map(renderProductCard);
     }; // Show no results state
 
 
@@ -1083,39 +1198,7 @@
       className: "search-results__header"
     }, shouldShowInitialData ? 'TRENDING SEARCHES' : 'BRANDS'), /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__list"
-    }, shouldShowInitialData ? (_limitBrands = limitBrands(initialSearchData === null || initialSearchData === void 0 ? void 0 : initialSearchData.trending_brands)) === null || _limitBrands === void 0 ? void 0 : _limitBrands.map(function (brand) {
-      return /*#__PURE__*/React__default.createElement("a", {
-        key: brand.id,
-        href: getBrandLink(brand),
-        className: "search-results__item",
-        onClick: function onClick() {
-          if (typeof onBrandSearchResultClick === 'function') {
-            onBrandSearchResultClick({
-              brand_name: brand.name,
-              brand_link: getBrandLink(brand),
-              search_string: searchValue,
-              is_trending: true
-            });
-          }
-        }
-      }, brand.name);
-    }) : (_limitBrands2 = limitBrands(searchResults === null || searchResults === void 0 ? void 0 : searchResults.brands)) === null || _limitBrands2 === void 0 ? void 0 : _limitBrands2.map(function (brand) {
-      return /*#__PURE__*/React__default.createElement("a", {
-        key: brand.link,
-        href: brand.link,
-        className: "search-results__item",
-        onClick: function onClick() {
-          if (typeof onBrandSearchResultClick === 'function') {
-            onBrandSearchResultClick({
-              brand_name: brand.name,
-              brand_link: brand.link,
-              search_string: searchValue,
-              is_trending: false
-            });
-          }
-        }
-      }, brand.name);
-    }))), /*#__PURE__*/React__default.createElement("div", {
+    }, renderBrandsList())), /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__section"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__section-header"
@@ -1129,7 +1212,7 @@
       }
     }, "View all items")), /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__product-list"
-    }, shouldShowInitialData ? initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la2 = initialSearchData.latest_products) === null || _initialSearchData$la2 === void 0 ? void 0 : _initialSearchData$la2.map(renderProductCard) : searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.map(renderProductCard)), /*#__PURE__*/React__default.createElement("button", {
+    }, renderProductsList()), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "search-results__view-all-button",
       onClick: function onClick() {
@@ -1252,7 +1335,12 @@
         if (currentSearchRequestToken.current === newSearchToken) {
           var _brandsResponse$data$, _productsResponse$dat, _productsResponse$dat2;
 
-          // Extract brands from aggregations
+          // Set loading to false when search completes
+          if (typeof onSearchLoading === 'function') {
+            onSearchLoading(false);
+          } // Extract brands from aggregations
+
+
           var brandsData = ((_brandsResponse$data$ = brandsResponse.data.data.luxity_products_aggregations) === null || _brandsResponse$data$ === void 0 ? void 0 : _brandsResponse$data$.luxity_brand) || []; // Extract products from filter
 
           var productsData = ((_productsResponse$dat = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat === void 0 ? void 0 : _productsResponse$dat.data) || [];
@@ -1315,6 +1403,11 @@
         }
       }).catch(function (error) {
         if (!axios.isCancel(error)) {
+          // Set loading to false when search fails
+          if (typeof onSearchLoading === 'function') {
+            onSearchLoading(false);
+          }
+
           setSearchResults({
             brands: [],
             products: []
@@ -1461,7 +1554,7 @@
         onSearchPreview = _ref.onSearchPreview,
         onProductSearchResultClick = _ref.onProductSearchResultClick,
         onBrandSearchResultClick = _ref.onBrandSearchResultClick,
-        onSearchLoading = _ref.onSearchLoading,
+        _onSearchLoading = _ref.onSearchLoading,
         onLogoutClick = _ref.onLogoutClick,
         onInterestClick = _ref.onInterestClick,
         onAddressClick = _ref.onAddressClick,
@@ -1491,9 +1584,20 @@
         showNoResults = _useState2[0],
         setShowNoResults = _useState2[1];
 
+    var _useState3 = React.useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        searchLoading = _useState4[0],
+        setSearchLoading = _useState4[1];
+
     var _useSearch = useSearch({
       endpoint: endpoint,
-      onSearchLoading: onSearchLoading,
+      onSearchLoading: function onSearchLoading(isLoading) {
+        setSearchLoading(isLoading);
+
+        if (typeof _onSearchLoading === 'function') {
+          _onSearchLoading(isLoading);
+        }
+      },
       currency: currency,
       onSearchPreview: onSearchPreview,
       onNoResults: setShowNoResults
@@ -1502,49 +1606,49 @@
         createDebouncedSearch = _useSearch.createDebouncedSearch,
         createImmediateSearch = _useSearch.createImmediateSearch;
 
-    var _useState3 = React.useState(''),
-        _useState4 = _slicedToArray(_useState3, 2),
-        searchValue = _useState4[0],
-        setSearchValue = _useState4[1];
-
-    var _useState5 = React.useState(false),
+    var _useState5 = React.useState(''),
         _useState6 = _slicedToArray(_useState5, 2),
-        showSearchBar = _useState6[0],
-        setShowSearchbar = _useState6[1];
+        searchValue = _useState6[0],
+        setSearchValue = _useState6[1];
 
     var _useState7 = React.useState(false),
         _useState8 = _slicedToArray(_useState7, 2),
-        showSideNav = _useState8[0],
-        setShowSideNav = _useState8[1];
+        showSearchBar = _useState8[0],
+        setShowSearchbar = _useState8[1];
 
-    var _useState9 = React.useState({
-      brands: [],
-      products: []
-    }),
+    var _useState9 = React.useState(false),
         _useState10 = _slicedToArray(_useState9, 2),
-        searchResults = _useState10[0],
-        setSearchResults = _useState10[1];
+        showSideNav = _useState10[0],
+        setShowSideNav = _useState10[1];
 
     var _useState11 = React.useState({
       brands: [],
       products: []
     }),
         _useState12 = _slicedToArray(_useState11, 2),
-        cachedResults = _useState12[0],
-        setCachedResults = _useState12[1];
+        searchResults = _useState12[0],
+        setSearchResults = _useState12[1];
 
-    var _useState13 = React.useState(false),
+    var _useState13 = React.useState({
+      brands: [],
+      products: []
+    }),
         _useState14 = _slicedToArray(_useState13, 2),
-        isSearchFocused = _useState14[0],
-        setIsSearchFocused = _useState14[1];
+        cachedResults = _useState14[0],
+        setCachedResults = _useState14[1];
+
+    var _useState15 = React.useState(false),
+        _useState16 = _slicedToArray(_useState15, 2),
+        isSearchFocused = _useState16[0],
+        setIsSearchFocused = _useState16[1];
 
-    var _useState15 = React.useState({
+    var _useState17 = React.useState({
       trending_brands: [],
       latest_products: []
     }),
-        _useState16 = _slicedToArray(_useState15, 2),
-        initialSearchView = _useState16[0],
-        setInitialSearchView = _useState16[1];
+        _useState18 = _slicedToArray(_useState17, 2),
+        initialSearchView = _useState18[0],
+        setInitialSearchView = _useState18[1];
 
     var searchResultsRef = React.useRef(null);
     var searchInputRef = React.useRef(null);
@@ -1785,7 +1889,8 @@
       onBrandSearchResultClick: onBrandSearchResultClick,
       onCreateInterests: onCreateInterests,
       noResultsImage: noResultsImage,
-      showNoResults: showNoResults
+      showNoResults: showNoResults,
+      isLoading: searchLoading
     }))), shop && /*#__PURE__*/React__default.createElement(LuxitySideNav, {
       accordionIcon: accordionIcon,
       logoSrc: logoSrc,

package/build/bundle.css

@@ -1 +1 @@
-.interests__add-button{display:flex;flex-direction:row;gap:10px;width:100%}@media only screen and (max-width:879px){.interests__add-button{flex-direction:column}}.interests__section-wrapper{display:flex;flex-direction:column;width:100%}.interests__select-option{display:flex;flex-direction:column;margin-bottom:15px}.interests__title{font-family:El Messiri;font-size:16px;margin-bottom:10px}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{align-items:center;display:flex;font-size:14px;font-weight:700;justify-content:center;line-height:20px;text-transform:uppercase}.side-nav__menu-icon{display:flex;height:25px;margin-right:10px;width:25px}.side-nav__menu-divider{margin-bottom:40px}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}@media only screen and (max-width:879px){.navbar{padding-top:12px}}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-left:16px;padding-right:16px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;gap:10px;justify-content:flex-start;width:100%}@media only screen and (max-width:879px){.navbar__wrapper .navbar__menu-icon-wrapper{margin-right:10px}.navbar__wrapper .navbar__logo{margin-left:0;margin-right:auto}.navbar__wrapper .navbar__icons-wrapper{align-items:center;display:flex;gap:20px;margin-left:auto}.navbar__wrapper .navbar__icons{align-items:center;display:flex;gap:20px;margin:0}.navbar__wrapper .navbar__icon{margin:0}}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__search-container{width:100%}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:20px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:150px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}.navbar__icon.navbar__cart-icon{margin-right:0}.navbar__icon--app{cursor:pointer;height:auto;margin-left:12px;width:20px}@media only screen and (max-width:879px){.navbar__icon--app{margin-right:0}}.navbar__loyalty-icon{height:18px;position:absolute;right:-14px;top:-6px;width:18px}.navbar__cart-icon{position:relative}.navbar__cart-count{bottom:50%;font-size:13px;height:20px;left:60%;position:absolute;width:20px}.navbar__account-initials,.navbar__cart-count{align-items:center;background-color:#f2eeeb;border-radius:50%;color:#000;display:flex;justify-content:center}.navbar__account-initials{font-size:11px;font-weight:500;height:24px;text-transform:uppercase;width:24px}@charset "UTF-8";.currency-select-container{align-items:center;display:flex;margin-right:18px;position:relative}.currency-select-container .currency-flag{margin-right:5px}.currency-select-container .currency-flag img{height:15px;-o-object-fit:cover;object-fit:cover;width:20px}.currency-select-container .currency-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;color:#000;cursor:pointer;font-family:inherit;font-size:14px;margin:0;outline:none;padding:5px 15px 5px 5px}.currency-select-container .currency-select::-ms-expand{display:none}.currency-select-container .currency-select:focus{box-shadow:none;outline:none}.currency-select-container .currency-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.currency-select-container:after{color:#000;content:"▼";font-size:10px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media only screen and (max-width:879px){.currency-select-container .currency-select{appearance:menulist;-webkit-appearance:menulist;-moz-appearance:menulist;padding-right:0}.currency-select-container:after{display:none}}.currency-select-container.disabled{cursor:not-allowed;opacity:.7}.currency-select-container.disabled .currency-select{pointer-events:none}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:7px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:30px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex;gap:8px}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.search-results{background:#fff;border:1px solid #dfdede;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;position:absolute;width:770px;z-index:50}@media only screen and (max-width:1052px){.search-results{border:none;box-shadow:none;flex-direction:column;left:0;right:0;top:100%;width:100%}}.search-results__section:first-child{border-right:1px solid #dfdede;flex:1;min-width:240px}.search-results__section:last-child{display:flex;flex:2;flex-direction:column}.search-results__section-header{align-items:center;display:flex;justify-content:space-between}.search-results__header{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;margin-bottom:0;padding:16px 20px;text-transform:uppercase}.search-results__view-all-link{display:none}@media only screen and (max-width:879px){.search-results__view-all-link{color:#000;display:block;font-family:Martel Sans;font-size:14px;margin-right:20px}}.search-results__list{display:flex;flex-direction:column}.search-results__item{color:grey;font-family:Martel Sans;font-size:14px;padding:8px 20px;text-decoration:none}.search-results__product-list{display:flex;flex-direction:column;overflow-y:auto}.product-card{color:inherit;display:flex;padding:12px 20px;text-decoration:none;transition:background-color .15s ease}.product-card:hover{background-color:#f4f4f4}.product-card__image-container{border-radius:2px;flex-shrink:0;height:90px;margin-right:16px;overflow:hidden;width:90px}.product-card__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.product-card__details{display:flex;flex:1;flex-direction:column}.product-card__name{color:#000;font-family:Martel Sans;font-size:14px;line-height:1.4;margin-bottom:24px}.product-card__brand-name{font-weight:600}.product-card__info-row{align-items:flex-end;display:flex;justify-content:space-between}@media only screen and (max-width:879px){.product-card__info-row{align-items:flex-start;flex-direction:column}}.product-card__price-group{display:flex;flex-direction:column;gap:4px}.product-card__price{font-family:Martel Sans;font-size:14px;font-weight:600;line-height:1}.product-card__price--promotion{color:#000}.product-card__price--original{color:#939393;font-weight:400;text-decoration:line-through}.product-card__price-with-promotion{display:flex;flex-direction:column;gap:2px}.product-card__retail-price{color:#939393;font-family:Martel Sans;font-size:14px;text-decoration:line-through}.product-card__condition{color:#000;font-family:Martel Sans;font-size:13px;margin-right:20px;text-align:right}.product-card__condition-label{color:#939393;margin-right:4px}.search-results__view-all-button{background-color:#f5f0ea!important;border:none;color:#000;cursor:pointer;font-family:Martel Sans;font-size:13px;font-weight:400;padding:16px;text-align:center}@media only screen and (max-width:879px){.search-results__view-all-button{display:none}}.search-results__no-results{display:flex;flex-direction:column;width:100%}.search-results__no-results-content{align-items:flex-start;display:flex;gap:20px;padding:20px}@media only screen and (max-width:879px){.search-results__no-results-content{align-items:center;flex-direction:column;text-align:center}}.search-results__no-results-image{border-radius:4px;flex-shrink:0;height:180px;overflow:hidden;width:180px}@media only screen and (max-width:879px){.search-results__no-results-image{height:150px;width:150px}}.search-results__no-results-image img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.search-results__no-results-text{display:flex;flex:1;flex-direction:column;gap:12px}.search-results__no-results-title{color:#000;font-family:Martel Sans;font-size:16px;font-weight:600;line-height:1.4;margin:0}.search-results__no-results-description{color:#939393;font-family:Martel Sans;font-size:14px;line-height:1.5;margin:0}.search-results__create-interest-button{background-color:#f5f0ea!important;border:none;color:#000;cursor:pointer;font-family:Martel Sans;font-size:13px;font-weight:400;padding:16px;text-align:center}@media only screen and (max-width:879px){.search-results__create-interest-button{display:block}}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:800px;overflow-y:auto}.dropdown__brand-elements{-moz-column-count:3;column-count:3;max-height:800px}.dropdown__brand-element{cursor:pointer;margin-bottom:10px}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+.interests__add-button{display:flex;flex-direction:row;gap:10px;width:100%}@media only screen and (max-width:879px){.interests__add-button{flex-direction:column}}.interests__section-wrapper{display:flex;flex-direction:column;width:100%}.interests__select-option{display:flex;flex-direction:column;margin-bottom:15px}.interests__title{font-family:El Messiri;font-size:16px;margin-bottom:10px}@charset "UTF-8";.currency-select-container{align-items:center;display:flex;margin-right:18px;position:relative}.currency-select-container .currency-flag{margin-right:5px}.currency-select-container .currency-flag img{height:15px;-o-object-fit:cover;object-fit:cover;width:20px}.currency-select-container .currency-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;color:#000;cursor:pointer;font-family:inherit;font-size:14px;margin:0;outline:none;padding:5px 15px 5px 5px}.currency-select-container .currency-select::-ms-expand{display:none}.currency-select-container .currency-select:focus{box-shadow:none;outline:none}.currency-select-container .currency-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.currency-select-container:after{color:#000;content:"▼";font-size:10px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media only screen and (max-width:879px){.currency-select-container .currency-select{appearance:menulist;-webkit-appearance:menulist;-moz-appearance:menulist;padding-right:0}.currency-select-container:after{display:none}}.currency-select-container.disabled{cursor:not-allowed;opacity:.7}.currency-select-container.disabled .currency-select{pointer-events:none}.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}@media only screen and (max-width:879px){.navbar{padding-top:12px}}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-left:16px;padding-right:16px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;gap:10px;justify-content:flex-start;width:100%}@media only screen and (max-width:879px){.navbar__wrapper .navbar__menu-icon-wrapper{margin-right:10px}.navbar__wrapper .navbar__logo{margin-left:0;margin-right:auto}.navbar__wrapper .navbar__icons-wrapper{align-items:center;display:flex;gap:20px;margin-left:auto}.navbar__wrapper .navbar__icons{align-items:center;display:flex;gap:20px;margin:0}.navbar__wrapper .navbar__icon{margin:0}}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__search-container{width:100%}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:20px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:150px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}.navbar__icon.navbar__cart-icon{margin-right:0}.navbar__icon--app{cursor:pointer;height:auto;margin-left:12px;width:20px}@media only screen and (max-width:879px){.navbar__icon--app{margin-right:0}}.navbar__loyalty-icon{height:18px;position:absolute;right:-14px;top:-6px;width:18px}.navbar__cart-icon{position:relative}.navbar__cart-count{bottom:50%;font-size:13px;height:20px;left:60%;position:absolute;width:20px}.navbar__account-initials,.navbar__cart-count{align-items:center;background-color:#f2eeeb;border-radius:50%;color:#000;display:flex;justify-content:center}.navbar__account-initials{font-size:11px;font-weight:500;height:24px;text-transform:uppercase;width:24px}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{align-items:center;display:flex;font-size:14px;font-weight:700;justify-content:center;line-height:20px;text-transform:uppercase}.side-nav__menu-icon{display:flex;height:25px;margin-right:10px;width:25px}.side-nav__menu-divider{margin-bottom:40px}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:7px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:30px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex;gap:8px}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.shimmer{animation:shimmer 1.2s ease-in-out infinite;background:linear-gradient(90deg,#f4f4f4 0,#dfdede 20%,#f4f4f4 40%,#f4f4f4);background-size:800px 104px}@media only screen and (max-width:1052px){.shimmer{background-size:600px 104px}}.search-results{background:#fff;border:1px solid #dfdede;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;position:absolute;width:770px;z-index:50}@media only screen and (max-width:1052px){.search-results{border:none;box-shadow:none;flex-direction:column;left:0;right:0;top:100%;width:100%}}.search-results__section:first-child{border-right:1px solid #dfdede;flex:1;min-width:240px}.search-results__section:last-child{display:flex;flex:2;flex-direction:column}.search-results__section-header{align-items:center;display:flex;justify-content:space-between}.search-results__header{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;margin-bottom:0;padding:16px 20px;text-transform:uppercase}@media only screen and (max-width:1052px){.search-results__header{font-size:13px;padding:12px 16px}}.search-results__view-all-link{display:none}@media only screen and (max-width:879px){.search-results__view-all-link{color:#000;display:block;font-family:Martel Sans;font-size:14px;margin-right:20px}}.search-results__list{display:flex;flex-direction:column}.search-results__item{color:grey;font-family:Martel Sans;font-size:14px;padding:8px 20px;text-decoration:none}.search-results__product-list{display:flex;flex-direction:column;overflow-y:auto}.product-card{color:inherit;display:flex;padding:12px 20px;text-decoration:none;transition:background-color .15s ease}.product-card:hover{background-color:#f4f4f4}.product-card__image-container{border-radius:2px;flex-shrink:0;height:90px;margin-right:16px;overflow:hidden;width:90px}.product-card__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.product-card__details{display:flex;flex:1;flex-direction:column}.product-card__name{color:#000;font-family:Martel Sans;font-size:14px;line-height:1.4;margin-bottom:24px}.product-card__brand-name{font-weight:600}.product-card__info-row{align-items:flex-end;display:flex;justify-content:space-between}@media only screen and (max-width:879px){.product-card__info-row{align-items:flex-start;flex-direction:column}}.product-card__price-group{display:flex;flex-direction:column;gap:4px}.product-card__price{font-family:Martel Sans;font-size:14px;font-weight:600;line-height:1}.product-card__price--promotion{color:#000}.product-card__price--original{color:#939393;font-weight:400;text-decoration:line-through}.product-card__price-with-promotion{display:flex;flex-direction:column;gap:2px}.product-card__retail-price{color:#939393;font-family:Martel Sans;font-size:14px;text-decoration:line-through}.product-card__condition{color:#000;font-family:Martel Sans;font-size:13px;margin-right:20px;text-align:right}.product-card__condition-label{color:#939393;margin-right:4px}.search-results__view-all-button{background-color:#f2eeeb!important;border:none;color:#000;cursor:pointer;font-family:Martel Sans;font-size:13px;font-weight:400;padding:16px;text-align:center}@media only screen and (max-width:879px){.search-results__view-all-button{display:none}}.search-results__no-results{display:flex;flex-direction:column;width:100%}.search-results__no-results-content{align-items:flex-start;display:flex;gap:20px;padding:20px}@media only screen and (max-width:879px){.search-results__no-results-content{gap:16px;padding:16px}}@media only screen and (max-width:1052px){.search-results__no-results-content{align-items:flex-start;gap:12px;padding:16px 12px}}.search-results__no-results-image{border-radius:4px;flex-shrink:0;height:180px;overflow:hidden;width:180px}@media only screen and (max-width:879px){.search-results__no-results-image{height:120px;width:120px}}@media only screen and (max-width:1052px){.search-results__no-results-image{height:100px;width:100px}}.search-results__no-results-image img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.search-results__no-results-text{display:flex;flex:1;flex-direction:column;gap:12px;text-align:left}@media only screen and (max-width:1052px){.search-results__no-results-text{gap:8px}}.search-results__no-results-title{color:#000;font-family:Martel Sans;font-size:16px;font-weight:600;line-height:1.4;margin:0}@media only screen and (max-width:879px){.search-results__no-results-title{font-size:14px}}@media only screen and (max-width:1052px){.search-results__no-results-title{font-size:14px;line-height:1.3}}.search-results__no-results-description{color:#939393;font-family:Martel Sans;font-size:14px;line-height:1.5;margin:0}@media only screen and (max-width:879px){.search-results__no-results-description{font-size:13px}}@media only screen and (max-width:1052px){.search-results__no-results-description{font-size:12px;line-height:1.4}}.search-results__create-interest-button{background-color:#f2eeeb!important;border:none;color:#000;cursor:pointer;font-family:Martel Sans;font-size:13px;font-weight:400;padding:16px;text-align:center;width:100%}@media only screen and (max-width:879px){.search-results__create-interest-button{display:block}}@media only screen and (max-width:1052px){.search-results__create-interest-button{font-size:13px;margin-top:8px;padding:14px 16px}}.brand-skeleton{display:flex;flex-direction:column;width:100%}.brand-skeleton__item{background-color:#f4f4f4;border-radius:4px;height:32px;margin:8px 20px}.brand-skeleton__item:first-child{margin-top:0}@media only screen and (max-width:1052px){.brand-skeleton__item{height:28px;margin:6px 16px}}.product-skeleton{display:flex;gap:16px;padding:12px 20px}@media only screen and (max-width:1052px){.product-skeleton{gap:12px;padding:10px 16px}}.product-skeleton__image{background-color:#f4f4f4;border-radius:2px;flex-shrink:0;height:90px;width:90px}@media only screen and (max-width:1052px){.product-skeleton__image{height:70px;width:70px}}.product-skeleton__content{display:flex;flex:1;flex-direction:column;gap:12px}@media only screen and (max-width:1052px){.product-skeleton__content{gap:8px}}.product-skeleton__title{background-color:#f4f4f4;border-radius:4px;height:16px;width:100%}@media only screen and (max-width:1052px){.product-skeleton__title{height:14px}}.product-skeleton__subtitle{background-color:#f4f4f4;border-radius:4px;height:14px;width:80%}@media only screen and (max-width:1052px){.product-skeleton__subtitle{height:12px;width:70%}}.product-skeleton__price{background-color:#f4f4f4;border-radius:4px;height:14px;margin-top:auto;width:60%}@media only screen and (max-width:1052px){.product-skeleton__price{height:12px;width:50%}}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:800px;overflow-y:auto}.dropdown__brand-elements{-moz-column-count:3;column-count:3;max-height:800px}.dropdown__brand-element{cursor:pointer;margin-bottom:10px}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/build/bundle.js

@@ -15804,7 +15804,7 @@
   };
 
   var SearchResults = function SearchResults(_ref) {
-    var _searchResults$brands, _searchResults$produc, _initialSearchData$tr, _initialSearchData$la, _limitBrands, _limitBrands2, _initialSearchData$la2, _searchResults$produc2;
+    var _searchResults$brands, _searchResults$produc, _initialSearchData$tr, _initialSearchData$la;
 
     var searchValue = _ref.searchValue,
         searchResults = _ref.searchResults,
@@ -15821,7 +15821,9 @@
         onBrandSearchResultClick = _ref.onBrandSearchResultClick,
         onCreateInterests = _ref.onCreateInterests,
         noResultsImage = _ref.noResultsImage,
-        showNoResults = _ref.showNoResults;
+        showNoResults = _ref.showNoResults,
+        _ref$isLoading = _ref.isLoading,
+        isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -15860,6 +15862,39 @@
       return "".concat(currencySymbol).concat(formatter.format(price));
     };
 
+    var renderBrandSkeleton = function renderBrandSkeleton() {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }));
+    };
+
+    var renderProductSkeleton = function renderProductSkeleton() {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _toConsumableArray(Array(3)).map(function (_, index) {
+        return /*#__PURE__*/React__default.createElement("div", {
+          key: index,
+          className: "product-skeleton"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__image shimmer"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__content"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__title shimmer"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__subtitle shimmer"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__price shimmer"
+        })));
+      }));
+    };
+
     var renderProductCard = function renderProductCard(product) {
       var selectedPrice = product.prices ? product.prices.find(function (p) {
         return p.currency === currency;
@@ -15929,6 +15964,70 @@
       }
 
       return brands;
+    };
+
+    var renderBrandsList = function renderBrandsList() {
+      var _limitBrands2;
+
+      if (isLoading) {
+        return renderBrandSkeleton();
+      }
+
+      if (shouldShowInitialData) {
+        var _limitBrands;
+
+        return (_limitBrands = limitBrands(initialSearchData === null || initialSearchData === void 0 ? void 0 : initialSearchData.trending_brands)) === null || _limitBrands === void 0 ? void 0 : _limitBrands.map(function (brand) {
+          return /*#__PURE__*/React__default.createElement("a", {
+            key: brand.id,
+            href: getBrandLink(brand),
+            className: "search-results__item",
+            onClick: function onClick() {
+              if (typeof onBrandSearchResultClick === 'function') {
+                onBrandSearchResultClick({
+                  brand_name: brand.name,
+                  brand_link: getBrandLink(brand),
+                  search_string: searchValue,
+                  is_trending: true
+                });
+              }
+            }
+          }, brand.name);
+        });
+      }
+
+      return (_limitBrands2 = limitBrands(searchResults === null || searchResults === void 0 ? void 0 : searchResults.brands)) === null || _limitBrands2 === void 0 ? void 0 : _limitBrands2.map(function (brand) {
+        return /*#__PURE__*/React__default.createElement("a", {
+          key: brand.link,
+          href: brand.link,
+          className: "search-results__item",
+          onClick: function onClick() {
+            if (typeof onBrandSearchResultClick === 'function') {
+              onBrandSearchResultClick({
+                brand_name: brand.name,
+                brand_link: brand.link,
+                search_string: searchValue,
+                is_trending: false
+              });
+            }
+          }
+        }, brand.name);
+      });
+    };
+
+    var renderProductsList = function renderProductsList() {
+      var _searchResults$produc2;
+
+      if (isLoading) {
+        return renderProductSkeleton();
+      }
+
+      if (shouldShowInitialData) {
+        var _initialSearchData$la2;
+
+        return initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la2 = initialSearchData.latest_products) === null || _initialSearchData$la2 === void 0 ? void 0 : _initialSearchData$la2.map(renderProductCard);
+      }
+
+      return searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.map(renderProductCard);
     }; // Show no results state
 
 
@@ -15969,39 +16068,7 @@
       className: "search-results__header"
     }, shouldShowInitialData ? 'TRENDING SEARCHES' : 'BRANDS'), /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__list"
-    }, shouldShowInitialData ? (_limitBrands = limitBrands(initialSearchData === null || initialSearchData === void 0 ? void 0 : initialSearchData.trending_brands)) === null || _limitBrands === void 0 ? void 0 : _limitBrands.map(function (brand) {
-      return /*#__PURE__*/React__default.createElement("a", {
-        key: brand.id,
-        href: getBrandLink(brand),
-        className: "search-results__item",
-        onClick: function onClick() {
-          if (typeof onBrandSearchResultClick === 'function') {
-            onBrandSearchResultClick({
-              brand_name: brand.name,
-              brand_link: getBrandLink(brand),
-              search_string: searchValue,
-              is_trending: true
-            });
-          }
-        }
-      }, brand.name);
-    }) : (_limitBrands2 = limitBrands(searchResults === null || searchResults === void 0 ? void 0 : searchResults.brands)) === null || _limitBrands2 === void 0 ? void 0 : _limitBrands2.map(function (brand) {
-      return /*#__PURE__*/React__default.createElement("a", {
-        key: brand.link,
-        href: brand.link,
-        className: "search-results__item",
-        onClick: function onClick() {
-          if (typeof onBrandSearchResultClick === 'function') {
-            onBrandSearchResultClick({
-              brand_name: brand.name,
-              brand_link: brand.link,
-              search_string: searchValue,
-              is_trending: false
-            });
-          }
-        }
-      }, brand.name);
-    }))), /*#__PURE__*/React__default.createElement("div", {
+    }, renderBrandsList())), /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__section"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__section-header"
@@ -16015,7 +16082,7 @@
       }
     }, "View all items")), /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__product-list"
-    }, shouldShowInitialData ? initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la2 = initialSearchData.latest_products) === null || _initialSearchData$la2 === void 0 ? void 0 : _initialSearchData$la2.map(renderProductCard) : searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.map(renderProductCard)), /*#__PURE__*/React__default.createElement("button", {
+    }, renderProductsList()), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "search-results__view-all-button",
       onClick: function onClick() {
@@ -16138,7 +16205,12 @@
         if (currentSearchRequestToken.current === newSearchToken) {
           var _brandsResponse$data$, _productsResponse$dat, _productsResponse$dat2;
 
-          // Extract brands from aggregations
+          // Set loading to false when search completes
+          if (typeof onSearchLoading === 'function') {
+            onSearchLoading(false);
+          } // Extract brands from aggregations
+
+
           var brandsData = ((_brandsResponse$data$ = brandsResponse.data.data.luxity_products_aggregations) === null || _brandsResponse$data$ === void 0 ? void 0 : _brandsResponse$data$.luxity_brand) || []; // Extract products from filter
 
           var productsData = ((_productsResponse$dat = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat === void 0 ? void 0 : _productsResponse$dat.data) || [];
@@ -16201,6 +16273,11 @@
         }
       }).catch(function (error) {
         if (!axios.isCancel(error)) {
+          // Set loading to false when search fails
+          if (typeof onSearchLoading === 'function') {
+            onSearchLoading(false);
+          }
+
           setSearchResults({
             brands: [],
             products: []
@@ -16348,7 +16425,7 @@
         onSearchPreview = _ref.onSearchPreview,
         onProductSearchResultClick = _ref.onProductSearchResultClick,
         onBrandSearchResultClick = _ref.onBrandSearchResultClick,
-        onSearchLoading = _ref.onSearchLoading,
+        _onSearchLoading = _ref.onSearchLoading,
         currency = _ref.currency,
         currencySymbol = _ref.currencySymbol,
         currencyOptions = _ref.currencyOptions,
@@ -16378,53 +16455,64 @@
 
     var _useState5 = React.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
-        isSearchFocused = _useState6[0],
-        setIsSearchFocused = _useState6[1];
+        searchLoading = _useState6[0],
+        setSearchLoading = _useState6[1];
+
+    var _useState7 = React.useState(false),
+        _useState8 = _slicedToArray(_useState7, 2),
+        isSearchFocused = _useState8[0],
+        setIsSearchFocused = _useState8[1];
 
-    var _useState7 = React.useState({
+    var _useState9 = React.useState({
       trending_brands: [],
       latest_products: []
     }),
-        _useState8 = _slicedToArray(_useState7, 2),
-        initialSearchView = _useState8[0],
-        setInitialSearchView = _useState8[1];
-
-    var _useState9 = React.useState({}),
         _useState10 = _slicedToArray(_useState9, 2),
-        dropdownData = _useState10[0],
-        setDropdownData = _useState10[1];
+        initialSearchView = _useState10[0],
+        setInitialSearchView = _useState10[1];
 
-    var _useState11 = React.useState(false),
+    var _useState11 = React.useState({}),
         _useState12 = _slicedToArray(_useState11, 2),
-        hasError = _useState12[0],
-        setHasError = _useState12[1];
+        dropdownData = _useState12[0],
+        setDropdownData = _useState12[1];
 
-    var _useState13 = React.useState({
-      brands: [],
-      products: []
-    }),
+    var _useState13 = React.useState(false),
         _useState14 = _slicedToArray(_useState13, 2),
-        searchResults = _useState14[0],
-        setSearchResults = _useState14[1];
+        hasError = _useState14[0],
+        setHasError = _useState14[1];
 
     var _useState15 = React.useState({
       brands: [],
       products: []
     }),
         _useState16 = _slicedToArray(_useState15, 2),
-        cachedResults = _useState16[0],
-        setCachedResults = _useState16[1];
+        searchResults = _useState16[0],
+        setSearchResults = _useState16[1];
 
-    var _useState17 = React.useState(false),
+    var _useState17 = React.useState({
+      brands: [],
+      products: []
+    }),
         _useState18 = _slicedToArray(_useState17, 2),
-        showNoResults = _useState18[0],
-        setShowNoResults = _useState18[1];
+        cachedResults = _useState18[0],
+        setCachedResults = _useState18[1];
+
+    var _useState19 = React.useState(false),
+        _useState20 = _slicedToArray(_useState19, 2),
+        showNoResults = _useState20[0],
+        setShowNoResults = _useState20[1];
 
     var searchResultsRef = React.useRef(null);
 
     var _useSearch = useSearch({
       endpoint: endpoint,
-      onSearchLoading: onSearchLoading,
+      onSearchLoading: function onSearchLoading(isLoading) {
+        setSearchLoading(isLoading);
+
+        if (typeof _onSearchLoading === 'function') {
+          _onSearchLoading(isLoading);
+        }
+      },
       currency: currency,
       onSearchPreview: onSearchPreview,
       onNoResults: setShowNoResults
@@ -16579,7 +16667,8 @@
       onBrandSearchResultClick: onBrandSearchResultClick,
       onCreateInterests: onCreateInterests,
       noResultsImage: noResultsImage,
-      showNoResults: showNoResults
+      showNoResults: showNoResults,
+      isLoading: searchLoading
     }), /*#__PURE__*/React__default.createElement("nav", {
       className: "navbar__nav-links navbar__nav-links--wrap"
     }, renderDropdownLinks(), !!stores.length && /*#__PURE__*/React__default.createElement("li", {
@@ -17276,7 +17365,7 @@
         onSearchPreview = _ref.onSearchPreview,
         onProductSearchResultClick = _ref.onProductSearchResultClick,
         onBrandSearchResultClick = _ref.onBrandSearchResultClick,
-        onSearchLoading = _ref.onSearchLoading,
+        _onSearchLoading = _ref.onSearchLoading,
         onLogoutClick = _ref.onLogoutClick,
         onInterestClick = _ref.onInterestClick,
         onAddressClick = _ref.onAddressClick,
@@ -17306,9 +17395,20 @@
         showNoResults = _useState2[0],
         setShowNoResults = _useState2[1];
 
+    var _useState3 = React.useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        searchLoading = _useState4[0],
+        setSearchLoading = _useState4[1];
+
     var _useSearch = useSearch({
       endpoint: endpoint,
-      onSearchLoading: onSearchLoading,
+      onSearchLoading: function onSearchLoading(isLoading) {
+        setSearchLoading(isLoading);
+
+        if (typeof _onSearchLoading === 'function') {
+          _onSearchLoading(isLoading);
+        }
+      },
       currency: currency,
       onSearchPreview: onSearchPreview,
       onNoResults: setShowNoResults
@@ -17317,49 +17417,49 @@
         createDebouncedSearch = _useSearch.createDebouncedSearch,
         createImmediateSearch = _useSearch.createImmediateSearch;
 
-    var _useState3 = React.useState(''),
-        _useState4 = _slicedToArray(_useState3, 2),
-        searchValue = _useState4[0],
-        setSearchValue = _useState4[1];
-
-    var _useState5 = React.useState(false),
+    var _useState5 = React.useState(''),
         _useState6 = _slicedToArray(_useState5, 2),
-        showSearchBar = _useState6[0],
-        setShowSearchbar = _useState6[1];
+        searchValue = _useState6[0],
+        setSearchValue = _useState6[1];
 
     var _useState7 = React.useState(false),
         _useState8 = _slicedToArray(_useState7, 2),
-        showSideNav = _useState8[0],
-        setShowSideNav = _useState8[1];
+        showSearchBar = _useState8[0],
+        setShowSearchbar = _useState8[1];
 
-    var _useState9 = React.useState({
-      brands: [],
-      products: []
-    }),
+    var _useState9 = React.useState(false),
         _useState10 = _slicedToArray(_useState9, 2),
-        searchResults = _useState10[0],
-        setSearchResults = _useState10[1];
+        showSideNav = _useState10[0],
+        setShowSideNav = _useState10[1];
 
     var _useState11 = React.useState({
       brands: [],
       products: []
     }),
         _useState12 = _slicedToArray(_useState11, 2),
-        cachedResults = _useState12[0],
-        setCachedResults = _useState12[1];
+        searchResults = _useState12[0],
+        setSearchResults = _useState12[1];
 
-    var _useState13 = React.useState(false),
+    var _useState13 = React.useState({
+      brands: [],
+      products: []
+    }),
         _useState14 = _slicedToArray(_useState13, 2),
-        isSearchFocused = _useState14[0],
-        setIsSearchFocused = _useState14[1];
+        cachedResults = _useState14[0],
+        setCachedResults = _useState14[1];
 
-    var _useState15 = React.useState({
+    var _useState15 = React.useState(false),
+        _useState16 = _slicedToArray(_useState15, 2),
+        isSearchFocused = _useState16[0],
+        setIsSearchFocused = _useState16[1];
+
+    var _useState17 = React.useState({
       trending_brands: [],
       latest_products: []
     }),
-        _useState16 = _slicedToArray(_useState15, 2),
-        initialSearchView = _useState16[0],
-        setInitialSearchView = _useState16[1];
+        _useState18 = _slicedToArray(_useState17, 2),
+        initialSearchView = _useState18[0],
+        setInitialSearchView = _useState18[1];
 
     var searchResultsRef = React.useRef(null);
     var searchInputRef = React.useRef(null);
@@ -17600,7 +17700,8 @@
       onBrandSearchResultClick: onBrandSearchResultClick,
       onCreateInterests: onCreateInterests,
       noResultsImage: noResultsImage,
-      showNoResults: showNoResults
+      showNoResults: showNoResults,
+      isLoading: searchLoading
     }))), shop && /*#__PURE__*/React__default.createElement(LuxitySideNav, {
       accordionIcon: accordionIcon,
       logoSrc: logoSrc,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonlineza/luxity-lib",
-  "version": "2.38.2",
+  "version": "2.39.0",
   "scripts": {
     "start": "start-storybook -p 9001 -c .storybook -s ./public",
     "clean": "rimraf ./build/*.*",

package/TestComponent.js

@@ -1,15 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
-  typeof define === 'function' && define.amd ? define(['react'], factory) :
-  (global = global || self, global.TestComponent = factory(global.React));
-}(this, (function (React) { 'use strict';
-
-  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
-
-  var TestComponent = function TestComponent() {
-    return /*#__PURE__*/React.createElement("div", null, "TestComponent");
-  };
-
-  return TestComponent;
-
-})));

package/build/CountryCodeSelect/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var ReactSelectWrapper_1 = __importDefault(require("../ReactSelectWrapper"));
-var responseTransform = function (countryData) {
-    return countryData.map(function (item) { return ({
-        label: "".concat(item.code, " (+").concat(item.dial_code, ")"),
-        value: item.code,
-    }); });
-};
-var CountryCodeSelect = function (_a) {
-    var _b = _a.countryData, countryData = _b === void 0 ? [] : _b, className = _a.className, classNamePrefix = _a.classNamePrefix, _c = _a.defaultCountryCode, defaultCountryCode = _c === void 0 ? 'ZA' : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { return null; } : _d, _e = _a.isSearchable, isSearchable = _e === void 0 ? true : _e, _f = _a.name, name = _f === void 0 ? 'country_code' : _f, _g = _a.renderNoData, renderNoData = _g === void 0 ? function () { return 'Loading...'; } : _g;
-    return (react_1.default.createElement(react_1.default.Fragment, null, countryData && countryData.length ? (react_1.default.createElement(ReactSelectWrapper_1.default, { name: name, className: className, classNamePrefix: classNamePrefix, options: responseTransform(countryData), defaultValue: responseTransform(countryData.filter(function (item) { return item.code === defaultCountryCode; })), onChange: onChange, isSearchable: isSearchable })) : (renderNoData())));
-};
-exports.default = CountryCodeSelect;

package/build/ReactSelectWrapper/index.js

@@ -1,34 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_select_1 = __importDefault(require("react-select"));
-var ReactSelectWrapper = function (_a) {
-    var _b = _a.isMulti, isMulti = _b === void 0 ? false : _b, _c = _a.isSearchable, isSearchable = _c === void 0 ? false : _c, _d = _a.components, components = _d === void 0 ? { IndicatorSeparator: function () { return null; } } : _d, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.className, className = _f === void 0 ? 'dropdown-select-container' : _f, _g = _a.classNamePrefix, classNamePrefix = _g === void 0 ? 'dropdown-select' : _g, _h = _a.onChange, onChange = _h === void 0 ? function () { return null; } : _h, name = _a.name, _j = _a.noOptionsMessage, noOptionsMessage = _j === void 0 ? function () { return 'No Options'; } : _j, rest = __rest(_a, ["isMulti", "isSearchable", "components", "options", "className", "classNamePrefix", "onChange", "name", "noOptionsMessage"]);
-    return (react_1.default.createElement(react_select_1.default, __assign({ isMulti: isMulti, isSearchable: isSearchable, components: components, options: options, className: className, classNamePrefix: classNamePrefix, onChange: onChange, name: name, noOptionsMessage: noOptionsMessage }, rest)));
-};
-exports.default = ReactSelectWrapper;

package/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};