@sledge-app/react-instant-search 2.0.70 → 2.0.71

package/dist/sledge-react-instant-search.js

@@ -2886,6 +2886,7 @@ const Badge = (props) => {
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   const [data, setData] = React__default.useState({});
   const [openFlyoutWishlistWidget, setOpenFlyoutWishlistWidget] = React__default.useState(false);
+  const [shouldMountWidget, setShouldMountWidget] = React__default.useState(false);
   const { use_wishlist_flyout } = ((_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.widget) || {};
   const { floating_button_type } = (dataSettings == null ? void 0 : dataSettings.launch_point) || {};
   const { alert_login, alert, login_button, header_title: language_header_title, see_all_wishlist } = ((_c = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _c.widget) || {};
@@ -2969,6 +2970,10 @@ const Badge = (props) => {
       triggerRenderWishlistBadge(false);
     handleGetWishlistInfo();
   }, [valueRenderWishlistBadge, isRenderAppWishlist]);
+  React__default.useEffect(() => {
+    if (openFlyoutWishlistWidget)
+      setShouldMountWidget(true);
+  }, [openFlyoutWishlistWidget]);
   const mainClassName = "sledge-wishlist__badge-wrapper";
   let productCardsComponent = null;
   if (React__default.Children.count(children)) {
@@ -3099,10 +3104,10 @@ const Badge = (props) => {
         ...sledgeAnonymId && !is_required_login ? {
           flyoutInfoContent: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { dangerouslySetInnerHTML: { __html: alert || "Please login to save your wishlist across devices." } })
         } : {},
-        content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-flyout-widget__wishlist-content", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Widget.Root, { isFlyout: useWishlistFlyout, children: [
+        content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-flyout-widget__wishlist-content", children: shouldMountWidget ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Widget.Root, { isFlyout: useWishlistFlyout, dataInfo: data, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CustomComponents, { productCard: productCardsComponent }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Widget.List, {})
-        ] }) }),
+        ] }) : null }),
         footer: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-flyout-widget__wishlist-footer", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: urlWishlistWidget, className: "sledge-flyout-widget__wishlist-see-all-button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", colorType: "success", fullWidth: true, children: see_all_wishlist || "See All Wishlist" }) }) }),
         open: openFlyoutWishlistWidget,
         setOpen: setOpenFlyoutWishlistWidget,
@@ -5834,8 +5839,16 @@ const FlyoutSidebar = ({ title, content, footer = null, open, setOpen, position
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-close-field-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sledge__flyout-close-field", type: "button", onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { width: 14, height: 14, color: "#393d4e" }) }) })
         ] }),
         flyoutInfoContent ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-mobile-info", children: flyoutInfoContent }) : null,
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: contentContainerRef, className: `sledge__flyout-mobile-content ${showBlurEffect ? "sledge__flyout-mobile-content-blur-effect" : ""}`, children: isLoading ? null : content }),
-        footer ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-mobile-footer", children: isLoading ? null : footer }) : null
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            ref: contentContainerRef,
+            className: `sledge__flyout-mobile-content ${showBlurEffect ? "sledge__flyout-mobile-content-blur-effect" : ""}`,
+            style: isLoading ? { display: "none" } : void 0,
+            children: content
+          }
+        ),
+        footer ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-mobile-footer", style: isLoading ? { display: "none" } : void 0, children: footer }) : null
       ] })
     ] }),
     document.body