@depict-ai/ui 4.7.14 → 4.7.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.7.14",
+  "version": "4.7.16",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",

package/server/ES10/index.cjs

@@ -18,6 +18,7 @@ function $parcel$export(e, n, v, s) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+$parcel$export(module.exports, "useProductCardIsVisible", () => $a52942afacbced93$export$80bb7300ce6a8be3);
 $parcel$export(module.exports, "useExpandingContainerReactive", () => $d6d51b09cb2116a6$export$5bad61ecde080b1f);
 $parcel$export(module.exports, "LooksSliderOrGrid", () => $e57cd46536ad992e$export$2c9f9bf2092486aa);
 $parcel$export(module.exports, "LookCard", () => $47e3c3102c78121b$export$44809a8a3e867e30);
@@ -104,78 +105,18 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.14";
-function $d6d51b09cb2116a6$export$5bad61ecde080b1f() {
-  const {
-    collapse: collapse,
-    expand: expand,
-    ExpandingContainer: ExpandingContainer
-  } = $3hooq$depictaiutilishared.useExpandingContainer(...arguments);
-  return {
-    collapse: collapse,
-    expand: expand,
-    ExpandingContainer: _ref => {
-      let {
-        children: children
-      } = _ref;
-      // get reactive signals/solid's jsx elements into `ExpandingContainer`
-      const fake_div = document.createElement("div");
-      const outer_expanding = $3hooq$solidjsweb.createComponent(ExpandingContainer, {
-        children: [fake_div]
-      });
-      const parent = fake_div.parentElement;
-      fake_div.remove();
-      $3hooq$solidjsweb.insert(parent, children);
-      return outer_expanding;
-    }
-  };
-}
-const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
-  const cols_at_size = [];
-  for (let i = 0; i < sorted_cols_at_size.length; i++) {
-    var _sorted_cols_at_size;
-    const [nb_cols, width] = sorted_cols_at_size[i];
-    const next_width = (_sorted_cols_at_size = sorted_cols_at_size[i + 1]) === null || _sorted_cols_at_size === void 0 ? void 0 : _sorted_cols_at_size[1];
-    const max_width = i === 0 ? "" : "".concat(width, "px");
-    const min_width = next_width !== undefined ? "".concat(next_width + 1, "px") : "";
-    const col_at_size = [nb_cols, min_width, max_width];
-    cols_at_size.push(col_at_size);
-  }
-  return cols_at_size;
-};
-const $5401a6698b0c0658$export$6daf8749b65a1b77 = cols_at_size => {
-  var _cols_at_size$every;
-  // Check that every element is an array
-  const are_arrays = cols_at_size === null || cols_at_size === void 0 ? void 0 : (_cols_at_size$every = cols_at_size.every) === null || _cols_at_size$every === void 0 ? void 0 : _cols_at_size$every.call(cols_at_size, element => Array.isArray(element));
-  if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
-  // Check width duplicates
-  const widths = cols_at_size.map(_ref => {
-    let [_, width] = _ref;
-    return width;
-  });
-  const widths_set = new Set(widths);
-  if (widths_set.size < widths.length) throw new Error("There are duplicate widths in cols_at_size");
-  if (cols_at_size.length === 1) {
-    const [nb_cols, width] = cols_at_size[0];
-    const max_width = width !== undefined ? "".concat(width, "px") : "";
-    return [[nb_cols, "", max_width]];
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.16";
+
+/**
+ * Gets product_id (the thing we key the rendering on) from a display
+ */
+function $b85edfec41cd3989$export$548d053aba053d79(display) {
+  if ("variant_index" in display) {
+    const actual_display = display.variant_displays[display.variant_index];
+    return actual_display.product_id;
   }
-  // Sort widths in ascending order
-  const sorted_cols_at_size = [...cols_at_size].sort((a, b) => {
-    const [_b, width_A] = a;
-    const [_a, width_b] = b;
-    if (width_A === undefined) return -1;
-    if (width_b === undefined) return 1;
-    return width_b - width_A;
-  });
-  return $5401a6698b0c0658$var$transform_elements(sorted_cols_at_size);
-};
-function $8edd3cf30d1fd8b4$export$a2cc176055f8f08() {
-  let what = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "grid";
-  const text = "Please try setting `columnsAtSize`/`gridSpacing` on the `SearchPage`/`CategoryPage` components to change the " + what + " before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
-  return (0, $3hooq$solidjsweb.isServer) ? {
-    t: "<!-- ".concat(text, " -->")
-  } : document.createComment(text);
+  if ("listing_id" in display) return display.listing_id;
+  return display.product_id;
 }
 function $e82d0d417fa613e8$export$2f0cbfbb4354bb52(elements) {
   // FYI this probably doesn't work on hugely deep nestings or large amount of elements
@@ -189,121 +130,6 @@ function $e82d0d417fa613e8$var$unwrapping_helper(elements) {
   } else if (typeof elements == "function") result.push(...$e82d0d417fa613e8$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
   return result;
 }
-let $e3915574cfd3466c$var$cached_placeholder_element;
-let $e3915574cfd3466c$var$rendering_cached_placeholder_element;
-function $e3915574cfd3466c$export$f33414a4df0afd3f(_ref) {
-  let {
-    product_card_template_: product_card_template_,
-    num_placeholders_: num_placeholders_,
-    content_blocks_: content_blocks_
-  } = _ref;
-  const [num_to_actually_show, set_num_to_actually_show] = $3hooq$solidjs.createSignal($3hooq$solidjs.untrack(num_placeholders_));
-  if (0, $3hooq$solidjsweb.isServer)
-    // want to render simple placeholders on server, effects don't run there
-    // FIXME when adding proper SSR: also SSR content blocks
-    return $3hooq$solidjs.createMemo(() => Array.from({
-      length: num_placeholders_()
-    }).map(() => {
-      const template_result = product_card_template_(null, undefined);
-      // @ts-ignore
-      if (typeof (template_result === null || template_result === void 0 ? void 0 : template_result.then) !== "function") return template_result;
-    }));
-  $3hooq$solidjs.createRenderEffect(() => {
-    const existing_num = num_to_actually_show();
-    const to_add = num_placeholders_() - existing_num;
-    if (to_add <= 0) return;
-    // Below comment is from when we used recommendation renderer and manual DOM manipulation for this, but I'm still scared to remove placeholders and mess up scroll restoration, so I'm keeping the way it worked. Otherwise, <Index> could be used which would be far more elegant.
-    // We don't need to remove placeholders, only need to add. The reason for that is that chrome restores the scroll position once all tasks queued as reaction of the "popstate" events have been completed in the task queue. That means that we need to get the placeholders in fast, or we might lose scroll position if the previous site was shorter.
-    // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyway but THIS WORKS, and I've been working on this bug for 3 hours so let's just keep it this way.
-    // Above comments were from when we added elements in this createRenderEffect. Now I changed it to just increment the number and render them from an <Index> instead, so I can add content blocks better
-    // Functionality should be the same
-    set_num_to_actually_show(existing_num + to_add);
-  });
-  return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Index), {
-    get each() {
-      return Array.from({
-        length: num_to_actually_show()
-      });
-    },
-    children: (_item, index) => {
-      const possible_content_block = $3hooq$solidjs.createMemo(() => {
-        var _content_blocks_, _content_blocks_2;
-        return content_blocks_ === null || content_blocks_ === void 0 ? void 0 : (_content_blocks_ = content_blocks_()) === null || _content_blocks_ === void 0 ? void 0 : (_content_blocks_2 = _content_blocks_()) === null || _content_blocks_2 === void 0 ? void 0 : _content_blocks_2[index];
-      });
-      // Show content block before product card, so it's *at* that index
-      return [possible_content_block, $e3915574cfd3466c$var$Placeholder({
-        product_card_template_: product_card_template_
-      })]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
-    }
-  });
-}
-/**
- * Get one placeholder element. It will be cloned for each placeholder for ultimate performance even when solid-js isn't rendering the placeholders.
- */
-function $e3915574cfd3466c$var$Placeholder(_ref2) {
-  let {
-    product_card_template_: product_card_template_
-  } = _ref2;
-  const get_cloned_placeholders = function () {
-    let element_to_clone = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : $e3915574cfd3466c$var$cached_placeholder_element;
-    return Array.isArray(element_to_clone) ? element_to_clone.map(el => el instanceof Node ? el.cloneNode(true) : el) : element_to_clone;
-  };
-  if ($e3915574cfd3466c$var$cached_placeholder_element) return get_cloned_placeholders();
-  let dispose_original_copy;
-  const get_unwrapped_element = $3hooq$solidjs.createRoot(dispose => {
-    dispose_original_copy = dispose;
-    // if product_card_template_ is async and rejects the resource will take care of throwing upwards here in the solid-js error handling system
-    const [resource] = $3hooq$solidjs.createResource(() => {
-      if ($e3915574cfd3466c$var$rendering_cached_placeholder_element) return $e3915574cfd3466c$var$rendering_cached_placeholder_element;
-      const return_value = product_card_template_(null, undefined);
-      if (typeof return_value === "object" && typeof (return_value === null || return_value === void 0 ? void 0 : return_value.then) === "function")
-        // Is Promise or promise-like object
-        $e3915574cfd3466c$var$rendering_cached_placeholder_element = return_value;
-      return return_value;
-    });
-    return $3hooq$solidjs.createMemo(() => {
-      if (resource.loading) return () => [];
-      return $e82d0d417fa613e8$export$2f0cbfbb4354bb52(resource);
-    });
-  });
-  $3hooq$solidjs.onCleanup(() => {
-    if ($e3915574cfd3466c$var$rendering_cached_placeholder_element) {
-      var _rendering_cached_pla;
-      // If we're still rendering in our separate root, let the rendering finish or other <Placeholder> components waiting for it might get an incomplete result
-      const unset_current_rendering = () => {
-        dispose_original_copy();
-        $e3915574cfd3466c$var$rendering_cached_placeholder_element = undefined;
-      };
-      (_rendering_cached_pla = $e3915574cfd3466c$var$rendering_cached_placeholder_element) === null || _rendering_cached_pla === void 0 || _rendering_cached_pla.then(unset_current_rendering, unset_current_rendering);
-    } else
-      // Otherwise, just make sure we've disposed our root
-      dispose_original_copy();
-  });
-  return $3hooq$solidjs.createMemo(() => {
-    const unwrapped_array = get_unwrapped_element()();
-    if (!(unwrapped_array !== null && unwrapped_array !== void 0 && unwrapped_array.length) || !unwrapped_array.every(item => item))
-      // Haven't finished rendering yet in case of "async" rendering, so don't freeze the elements yet
-      return;
-    // placeholders have finished rendering, freeze the elements
-    // here we might receive the result of a promise that has already been received, tore down and put into cached_placeholder_element, so don't overwrite that more valid result if it's already set
-    $e3915574cfd3466c$var$cached_placeholder_element || ($e3915574cfd3466c$var$cached_placeholder_element = get_cloned_placeholders(unwrapped_array)); // Clone initial return value so that who gave us the elements can't mutate them, which has caused issues before with react
-    $e3915574cfd3466c$var$rendering_cached_placeholder_element = undefined;
-    dispose_original_copy(); // So that this memo will never re-run and the placeholder rendering function can clean up
-    return get_cloned_placeholders(); // clone, just in case. If we wouldn't, someone could modify the copy in the DOM, and it would affect the cached version
-  });
-}
-
-/**
- * Gets product_id (the thing we key the rendering on) from a display
- */
-function $b85edfec41cd3989$export$548d053aba053d79(display) {
-  if ("variant_index" in display) {
-    const actual_display = display.variant_displays[display.variant_index];
-    return actual_display.product_id;
-  }
-  if ("listing_id" in display) return display.listing_id;
-  return display.product_id;
-}
 const $b54645378dfc7280$var$ProductCardIndexContext = /*@__PURE__*/$3hooq$solidjs.createContext();
 function $b54645378dfc7280$export$11354f017ddc9790(props) {
   return $3hooq$solidjsweb.createComponent($b54645378dfc7280$var$ProductCardIndexContext.Provider, {
@@ -521,6 +347,266 @@ function $76012c4468a53d1f$var$deep_equal(obj1, obj2) {
   }
   return true;
 }
+const $a52942afacbced93$var$CurrentlyIntersectingContext = /*@__PURE__*/$3hooq$solidjs.createContext();
+function $a52942afacbced93$export$4a14175d33d81a96(_ref) {
+  let {
+    displays_by_key_: displays_by_key_,
+    product_card_template_: product_card_template_,
+    content_blocks_: content_blocks_,
+    alwaysObserveCards_: alwaysObserveCards_
+  } = _ref;
+  // The following sets up an intersection observer to determine which results are in the viewport, used for the ScrollStatus indicator, knowing when to load more and any other consumer of the useProductCardIsVisible hook.
+  const targetToIndexMap_ = new Map();
+  const indexToTargetMap_ = new Map();
+  const [listenersForIntersecting, setListenersForIntersecting] = $3hooq$solidjs.createSignal(0);
+  const [currentlyIntersecting, setCurrentlyIntersecting] = $3hooq$solidjs.createSignal(new Set(), {
+    equals: false
+  });
+  const shouldObserve = $3hooq$solidjs.createMemo(() => alwaysObserveCards_ || listenersForIntersecting() > 0);
+  const intersection_observer = new IntersectionObserver($3hooq$depictaiutilishared.catchify(records => {
+    const intersectingValue = currentlyIntersecting();
+    for (let i = 0; i < records.length; i++) {
+      const record = records[i];
+      const {
+        target: target,
+        intersectionRatio: intersectionRatio
+      } = record;
+      const index_of_target = targetToIndexMap_.get(target);
+      if (index_of_target == undefined) return; // It seems like it can happen that we get IntersectionObserverEntries after the onCleanup function for a recommendation card has run, in Firefox. Probably a bug in Firefox? If I understood the bug correctly, this is a workaround.
+      const is_in_set = intersectingValue.has(index_of_target);
+      if (intersectionRatio > 0) {
+        if (!is_in_set) intersectingValue.add(index_of_target);
+      } else if (is_in_set) intersectingValue.delete(index_of_target);
+    }
+    setCurrentlyIntersecting(intersectingValue);
+  }, "renderDisplays IO failed"));
+  const renderedDisplays_ = $3hooq$solidjsweb.createComponent($a52942afacbced93$var$CurrentlyIntersectingContext.Provider, {
+    value: {
+      currentlyIntersecting_: currentlyIntersecting,
+      setIsListening_: setListenersForIntersecting
+    },
+    get children() {
+      return $76012c4468a53d1f$export$43f0fb951fcb0c54({
+        displays_by_key_: displays_by_key_,
+        product_card_template_: product_card_template_,
+        content_blocks_: content_blocks_,
+        do_per_elements_: (elements, index_accessor) =>
+        // Adds/removes elements from the "results in viewport" intersection observer above
+        $3hooq$solidjs.createEffect(() => {
+          if (!shouldObserve()) return;
+          const display_index = index_accessor();
+          // Nested createEffect because we only want to re-run this when the index changes (or we should/shouldn't observe)
+          // We need to save in a map which index the elements of this template are so that we can know that in the IntersectionObserver callback
+          for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            targetToIndexMap_.set(element, display_index);
+            intersection_observer.observe(element);
+            $3hooq$solidjs.onCleanup(() => {
+              intersection_observer.unobserve(element);
+              targetToIndexMap_.delete(element);
+              const intersecting = $3hooq$solidjs.untrack(currentlyIntersecting);
+              const wasDeleted = intersecting.delete(display_index);
+              if (wasDeleted) setCurrentlyIntersecting(intersecting);
+            });
+          }
+          indexToTargetMap_.set(display_index, elements);
+          $3hooq$solidjs.onCleanup(() => indexToTargetMap_.delete(display_index));
+        })
+      });
+    }
+  });
+  return {
+    renderedDisplays_: renderedDisplays_,
+    indexToTargetMap_: indexToTargetMap_,
+    currentlyIntersecting: currentlyIntersecting
+  };
+}
+function $a52942afacbced93$export$80bb7300ce6a8be3() {
+  const {
+    setIsListening_: setIsListening_,
+    currentlyIntersecting_: currentlyIntersecting_
+  } = $3hooq$solidjs.useContext($a52942afacbced93$var$CurrentlyIntersectingContext) || {};
+  const getOurIndex = $b54645378dfc7280$export$e3faf4d95300054f();
+  const isVisible = $3hooq$solidjs.createMemo(() => currentlyIntersecting_ === null || currentlyIntersecting_ === void 0 ? void 0 : currentlyIntersecting_().has(getOurIndex === null || getOurIndex === void 0 ? void 0 : getOurIndex()));
+  setIsListening_ === null || setIsListening_ === void 0 || setIsListening_(prev => prev + 1);
+  $3hooq$solidjs.onCleanup(() => setIsListening_ === null || setIsListening_ === void 0 ? void 0 : setIsListening_(prev => prev + 1));
+  return isVisible;
+}
+function $d6d51b09cb2116a6$export$5bad61ecde080b1f() {
+  const {
+    collapse: collapse,
+    expand: expand,
+    ExpandingContainer: ExpandingContainer
+  } = $3hooq$depictaiutilishared.useExpandingContainer(...arguments);
+  return {
+    collapse: collapse,
+    expand: expand,
+    ExpandingContainer: _ref => {
+      let {
+        children: children
+      } = _ref;
+      // get reactive signals/solid's jsx elements into `ExpandingContainer`
+      const fake_div = document.createElement("div");
+      const outer_expanding = $3hooq$solidjsweb.createComponent(ExpandingContainer, {
+        children: [fake_div]
+      });
+      const parent = fake_div.parentElement;
+      fake_div.remove();
+      $3hooq$solidjsweb.insert(parent, children);
+      return outer_expanding;
+    }
+  };
+}
+const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
+  const cols_at_size = [];
+  for (let i = 0; i < sorted_cols_at_size.length; i++) {
+    var _sorted_cols_at_size;
+    const [nb_cols, width] = sorted_cols_at_size[i];
+    const next_width = (_sorted_cols_at_size = sorted_cols_at_size[i + 1]) === null || _sorted_cols_at_size === void 0 ? void 0 : _sorted_cols_at_size[1];
+    const max_width = i === 0 ? "" : "".concat(width, "px");
+    const min_width = next_width !== undefined ? "".concat(next_width + 1, "px") : "";
+    const col_at_size = [nb_cols, min_width, max_width];
+    cols_at_size.push(col_at_size);
+  }
+  return cols_at_size;
+};
+const $5401a6698b0c0658$export$6daf8749b65a1b77 = cols_at_size => {
+  var _cols_at_size$every;
+  // Check that every element is an array
+  const are_arrays = cols_at_size === null || cols_at_size === void 0 ? void 0 : (_cols_at_size$every = cols_at_size.every) === null || _cols_at_size$every === void 0 ? void 0 : _cols_at_size$every.call(cols_at_size, element => Array.isArray(element));
+  if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
+  // Check width duplicates
+  const widths = cols_at_size.map(_ref => {
+    let [_, width] = _ref;
+    return width;
+  });
+  const widths_set = new Set(widths);
+  if (widths_set.size < widths.length) throw new Error("There are duplicate widths in cols_at_size");
+  if (cols_at_size.length === 1) {
+    const [nb_cols, width] = cols_at_size[0];
+    const max_width = width !== undefined ? "".concat(width, "px") : "";
+    return [[nb_cols, "", max_width]];
+  }
+  // Sort widths in ascending order
+  const sorted_cols_at_size = [...cols_at_size].sort((a, b) => {
+    const [_b, width_A] = a;
+    const [_a, width_b] = b;
+    if (width_A === undefined) return -1;
+    if (width_b === undefined) return 1;
+    return width_b - width_A;
+  });
+  return $5401a6698b0c0658$var$transform_elements(sorted_cols_at_size);
+};
+function $8edd3cf30d1fd8b4$export$a2cc176055f8f08() {
+  let what = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "grid";
+  const text = "Please try setting `columnsAtSize`/`gridSpacing` on the `SearchPage`/`CategoryPage` components to change the " + what + " before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  return (0, $3hooq$solidjsweb.isServer) ? {
+    t: "<!-- ".concat(text, " -->")
+  } : document.createComment(text);
+}
+let $e3915574cfd3466c$var$cached_placeholder_element;
+let $e3915574cfd3466c$var$rendering_cached_placeholder_element;
+function $e3915574cfd3466c$export$f33414a4df0afd3f(_ref) {
+  let {
+    product_card_template_: product_card_template_,
+    num_placeholders_: num_placeholders_,
+    content_blocks_: content_blocks_
+  } = _ref;
+  const [num_to_actually_show, set_num_to_actually_show] = $3hooq$solidjs.createSignal($3hooq$solidjs.untrack(num_placeholders_));
+  if (0, $3hooq$solidjsweb.isServer)
+    // want to render simple placeholders on server, effects don't run there
+    // FIXME when adding proper SSR: also SSR content blocks
+    return $3hooq$solidjs.createMemo(() => Array.from({
+      length: num_placeholders_()
+    }).map(() => {
+      const template_result = product_card_template_(null, undefined);
+      // @ts-ignore
+      if (typeof (template_result === null || template_result === void 0 ? void 0 : template_result.then) !== "function") return template_result;
+    }));
+  $3hooq$solidjs.createRenderEffect(() => {
+    const existing_num = num_to_actually_show();
+    const to_add = num_placeholders_() - existing_num;
+    if (to_add <= 0) return;
+    // Below comment is from when we used recommendation renderer and manual DOM manipulation for this, but I'm still scared to remove placeholders and mess up scroll restoration, so I'm keeping the way it worked. Otherwise, <Index> could be used which would be far more elegant.
+    // We don't need to remove placeholders, only need to add. The reason for that is that chrome restores the scroll position once all tasks queued as reaction of the "popstate" events have been completed in the task queue. That means that we need to get the placeholders in fast, or we might lose scroll position if the previous site was shorter.
+    // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyway but THIS WORKS, and I've been working on this bug for 3 hours so let's just keep it this way.
+    // Above comments were from when we added elements in this createRenderEffect. Now I changed it to just increment the number and render them from an <Index> instead, so I can add content blocks better
+    // Functionality should be the same
+    set_num_to_actually_show(existing_num + to_add);
+  });
+  return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Index), {
+    get each() {
+      return Array.from({
+        length: num_to_actually_show()
+      });
+    },
+    children: (_item, index) => {
+      const possible_content_block = $3hooq$solidjs.createMemo(() => {
+        var _content_blocks_, _content_blocks_2;
+        return content_blocks_ === null || content_blocks_ === void 0 ? void 0 : (_content_blocks_ = content_blocks_()) === null || _content_blocks_ === void 0 ? void 0 : (_content_blocks_2 = _content_blocks_()) === null || _content_blocks_2 === void 0 ? void 0 : _content_blocks_2[index];
+      });
+      // Show content block before product card, so it's *at* that index
+      return [possible_content_block, $e3915574cfd3466c$var$Placeholder({
+        product_card_template_: product_card_template_
+      })]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+    }
+  });
+}
+/**
+ * Get one placeholder element. It will be cloned for each placeholder for ultimate performance even when solid-js isn't rendering the placeholders.
+ */
+function $e3915574cfd3466c$var$Placeholder(_ref2) {
+  let {
+    product_card_template_: product_card_template_
+  } = _ref2;
+  const get_cloned_placeholders = function () {
+    let element_to_clone = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : $e3915574cfd3466c$var$cached_placeholder_element;
+    return Array.isArray(element_to_clone) ? element_to_clone.map(el => el instanceof Node ? el.cloneNode(true) : el) : element_to_clone;
+  };
+  if ($e3915574cfd3466c$var$cached_placeholder_element) return get_cloned_placeholders();
+  let dispose_original_copy;
+  const get_unwrapped_element = $3hooq$solidjs.createRoot(dispose => {
+    dispose_original_copy = dispose;
+    // if product_card_template_ is async and rejects the resource will take care of throwing upwards here in the solid-js error handling system
+    const [resource] = $3hooq$solidjs.createResource(() => {
+      if ($e3915574cfd3466c$var$rendering_cached_placeholder_element) return $e3915574cfd3466c$var$rendering_cached_placeholder_element;
+      const return_value = product_card_template_(null, undefined);
+      if (typeof return_value === "object" && typeof (return_value === null || return_value === void 0 ? void 0 : return_value.then) === "function")
+        // Is Promise or promise-like object
+        $e3915574cfd3466c$var$rendering_cached_placeholder_element = return_value;
+      return return_value;
+    });
+    return $3hooq$solidjs.createMemo(() => {
+      if (resource.loading) return () => [];
+      return $e82d0d417fa613e8$export$2f0cbfbb4354bb52(resource);
+    });
+  });
+  $3hooq$solidjs.onCleanup(() => {
+    if ($e3915574cfd3466c$var$rendering_cached_placeholder_element) {
+      var _rendering_cached_pla;
+      // If we're still rendering in our separate root, let the rendering finish or other <Placeholder> components waiting for it might get an incomplete result
+      const unset_current_rendering = () => {
+        dispose_original_copy();
+        $e3915574cfd3466c$var$rendering_cached_placeholder_element = undefined;
+      };
+      (_rendering_cached_pla = $e3915574cfd3466c$var$rendering_cached_placeholder_element) === null || _rendering_cached_pla === void 0 || _rendering_cached_pla.then(unset_current_rendering, unset_current_rendering);
+    } else
+      // Otherwise, just make sure we've disposed our root
+      dispose_original_copy();
+  });
+  return $3hooq$solidjs.createMemo(() => {
+    const unwrapped_array = get_unwrapped_element()();
+    if (!(unwrapped_array !== null && unwrapped_array !== void 0 && unwrapped_array.length) || !unwrapped_array.every(item => item))
+      // Haven't finished rendering yet in case of "async" rendering, so don't freeze the elements yet
+      return;
+    // placeholders have finished rendering, freeze the elements
+    // here we might receive the result of a promise that has already been received, tore down and put into cached_placeholder_element, so don't overwrite that more valid result if it's already set
+    $e3915574cfd3466c$var$cached_placeholder_element || ($e3915574cfd3466c$var$cached_placeholder_element = get_cloned_placeholders(unwrapped_array)); // Clone initial return value so that who gave us the elements can't mutate them, which has caused issues before with react
+    $e3915574cfd3466c$var$rendering_cached_placeholder_element = undefined;
+    dispose_original_copy(); // So that this memo will never re-run and the placeholder rendering function can clean up
+    return get_cloned_placeholders(); // clone, just in case. If we wouldn't, someone could modify the copy in the DOM, and it would affect the cached version
+  });
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $95e4006e1dcb5b72$export$e1d52e4f0c7557a1 extends Error {}
@@ -807,10 +893,13 @@ function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
           return (() => {
             // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
             const displays_by_key_ = $76012c4468a53d1f$export$7f8bd308237ab5a5($3hooq$solidjs.createMemo(() => recommendations_resource_() || []));
-            return $76012c4468a53d1f$export$43f0fb951fcb0c54({
+            const {
+              renderedDisplays_: renderedDisplays_
+            } = $a52942afacbced93$export$4a14175d33d81a96({
               displays_by_key_: displays_by_key_,
               product_card_template_: product_card_template_
             });
+            return renderedDisplays_;
           })();
         }
       });
@@ -1853,10 +1942,13 @@ function $2c920813c92d6987$export$7da560f849543dff(_ref) {
           return (() => {
             // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
             const displays_by_key_ = $76012c4468a53d1f$export$7f8bd308237ab5a5($3hooq$solidjs.createMemo(() => recommendations_resource_() || []));
-            return $76012c4468a53d1f$export$43f0fb951fcb0c54({
+            const {
+              renderedDisplays_: renderedDisplays_
+            } = $a52942afacbced93$export$4a14175d33d81a96({
               displays_by_key_: displays_by_key_,
               product_card_template_: product_card_template_
             });
+            return renderedDisplays_;
           })();
         }
       });
@@ -8714,10 +8806,13 @@ function $c77adcdf5346b187$export$7de92c4c2205ebf3(_ref) {
               if (!should_show() && prev) return prev; // When we're invisible, don't update what we're rendering to be possibly undefined to preserve the same products if possible
               return recommendations_resource() || [];
             }));
-            return $76012c4468a53d1f$export$43f0fb951fcb0c54({
+            const {
+              renderedDisplays_: renderedDisplays_
+            } = $a52942afacbced93$export$4a14175d33d81a96({
               displays_by_key_: displays_by_key_,
               product_card_template_: product_card_template_
             });
+            return renderedDisplays_;
           })();
         }
       });
@@ -9486,8 +9581,8 @@ function $0d3ee7000f047e67$export$a1fd619a4743ca08(_ref) {
   let {
     plp_results_: plp_results_,
     product_card_template_: product_card_template_,
-    first_result_in_viewport_: [, set_first_result_in_viewport],
-    last_result_in_viewport_: [get_last_result_in_viewport_, set_last_result_in_viewport],
+    first_result_in_viewport_: [, setFirstResultInViewport],
+    last_result_in_viewport_: [lastResultInViewport, setLastResultsInViewport],
     all_products_loaded_: all_products_loaded_,
     min_products_to_fetch_: min_products_to_fetch_,
     query_base_: query_base_,
@@ -9495,27 +9590,6 @@ function $0d3ee7000f047e67$export$a1fd619a4743ca08(_ref) {
     is_loading_: is_loading_,
     content_blocks_: content_blocks_
   } = _ref;
-  // The following sets up an intersection observer to determine which results are in the viewport, used for the ScrollStatus indicator and knowing when to load more
-  const target_to_index_map = new Map();
-  const index_to_target_map_ = new Map();
-  const currently_intersecting = new Set();
-  const intersection_observer = new IntersectionObserver($3hooq$depictaiutilishared.catchify(records => {
-    for (let i = 0; i < records.length; i++) {
-      const record = records[i];
-      const {
-        target: target,
-        intersectionRatio: intersectionRatio
-      } = record;
-      const index_of_target = target_to_index_map.get(target);
-      if (index_of_target == undefined) return; // It seems like it can happen that we get IntersectionObserverEntries after the onCleanup function for a recommendation card has run, in Firefox. Probably a bug in Firefox? If I understood the bug correctly, this is a workaround.
-      const is_in_set = currently_intersecting.has(index_of_target);
-      if (intersectionRatio > 0) {
-        if (!is_in_set) currently_intersecting.add(index_of_target);
-      } else if (is_in_set) currently_intersecting.delete(index_of_target);
-    }
-    set_first_result_in_viewport(Math.min(...currently_intersecting) + 1); // +1 because we want to start counting at 1
-    set_last_result_in_viewport(Math.max(...currently_intersecting) + 1);
-  }, "PLPResults IO failed"));
   // Although typing doesn't reflect it, plp_results is guaranteed to contain an array of at least one display at this point
   const [get_extra_displays, set_extra_displays_] = $3hooq$solidjs.createSignal([], {
     equals: false
@@ -9524,10 +9598,20 @@ function $0d3ee7000f047e67$export$a1fd619a4743ca08(_ref) {
     var _plp_results_;
     return [...(((_plp_results_ = plp_results_()) === null || _plp_results_ === void 0 ? void 0 : _plp_results_.displays) || []), ...get_extra_displays()];
   }));
+  const {
+    indexToTargetMap_: indexToTargetMap_,
+    renderedDisplays_: renderedDisplays_,
+    currentlyIntersecting: currentlyIntersecting
+  } = $a52942afacbced93$export$4a14175d33d81a96({
+    displays_by_key_: displays_by_key_,
+    product_card_template_: product_card_template_,
+    content_blocks_: content_blocks_,
+    alwaysObserveCards_: true
+  });
   const percentage_in_view_ = $45c16e404a883f74$export$63dd0350f8559dda({
-    get_last_result_in_viewport_: get_last_result_in_viewport_,
+    get_last_result_in_viewport_: lastResultInViewport,
     displays_by_key_: displays_by_key_,
-    index_to_target_map_: index_to_target_map_,
+    index_to_target_map_: indexToTargetMap_,
     is_loading_: is_loading_,
     get_extra_displays: get_extra_displays
   });
@@ -9540,30 +9624,12 @@ function $0d3ee7000f047e67$export$a1fd619a4743ca08(_ref) {
     query_base_: query_base_,
     depict_api_: depict_api_
   });
-  return $76012c4468a53d1f$export$43f0fb951fcb0c54({
-    displays_by_key_: displays_by_key_,
-    product_card_template_: product_card_template_,
-    content_blocks_: content_blocks_,
-    do_per_elements_: (elements, index_accessor) =>
-    // Adds/removes elements from the "results in viewport" intersection observer above
-    $3hooq$solidjs.createEffect(() => {
-      const display_index = index_accessor();
-      // Nested createEffect because we only want to re-run this when the index changes
-      // We need to save in a map which index the elements of this template are so that we can know that in the IntersectionObserver callback
-      for (let i = 0; i < elements.length; i++) {
-        const element = elements[i];
-        target_to_index_map.set(element, display_index);
-        intersection_observer.observe(element);
-        $3hooq$solidjs.onCleanup(() => {
-          intersection_observer.unobserve(element);
-          target_to_index_map.delete(element);
-          currently_intersecting.delete(display_index);
-        });
-      }
-      index_to_target_map_.set(display_index, elements);
-      $3hooq$solidjs.onCleanup(() => index_to_target_map_.delete(display_index));
-    })
+  $3hooq$solidjs.createEffect(() => {
+    const intersecting = currentlyIntersecting();
+    setFirstResultInViewport(Math.min(...intersecting) + 1); // +1 because we want to start counting at 1
+    setLastResultsInViewport(Math.max(...intersecting) + 1);
   });
+  return renderedDisplays_;
 }
 var $830518481649feb1$var$_tmpl$ = ["<style", ' type="text/css">', "</style>"];
 const $830518481649feb1$export$c500183c31c2b22e = "--spans-columns";
@@ -9960,11 +10026,13 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
             cols_at_size_: modified_cols_at_size,
             set_top_row_shortened_by_: set_top_row_shortened_by_
           }));
-          const rendered_placeholders = $3hooq$solidjs.createMemo(() => get_should_have_placeholders_rendered() ? $e3915574cfd3466c$export$f33414a4df0afd3f({
-            content_blocks_: content_blocks_,
-            product_card_template_: product_card_template_,
-            num_placeholders_: num_placeholders_
-          }) : undefined);
+          const rendered_placeholders = $3hooq$solidjs.createMemo(() => {
+            if (get_should_have_placeholders_rendered()) return $e3915574cfd3466c$export$f33414a4df0afd3f({
+              content_blocks_: content_blocks_,
+              product_card_template_: product_card_template_,
+              num_placeholders_: num_placeholders_
+            });
+          });
           const layout = $3hooq$solidjs.createMemo(() => {
             const incoming_layout = layout_options_().layout;
             if (incoming_layout === "slider-without-filters") return "slider";