@depict-ai/ui 2.0.8 → 2.0.10

package/latest/index.js

@@ -1,11 +1,11 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, catchify as $9HbP8$catchify, slider_fractional_factory as $9HbP8$slider_fractional_factory, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, report as $9HbP8$report, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, observer as $9HbP8$observer, is_safari as $9HbP8$is_safari, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, dlog as $9HbP8$dlog, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, javascript_media_query as $9HbP8$javascript_media_query, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, dwarn as $9HbP8$dwarn, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, use_href_accessor as $9HbP8$use_href_accessor, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { createSignal as $9HbP8$createSignal, onCleanup as $9HbP8$onCleanup, createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, Show as $9HbP8$Show, createRenderEffect as $9HbP8$createRenderEffect, createRoot as $9HbP8$createRoot, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, createUniqueId as $9HbP8$createUniqueId, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, Index as $9HbP8$Index, on as $9HbP8$on, batch as $9HbP8$batch, createReaction as $9HbP8$createReaction } from "solid-js";
+import { add_to_version_info as $9HbP8$add_to_version_info, catchify as $9HbP8$catchify, slider_fractional_factory as $9HbP8$slider_fractional_factory, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, report as $9HbP8$report, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, observer as $9HbP8$observer, is_safari as $9HbP8$is_safari, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, dlog as $9HbP8$dlog, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, javascript_media_query as $9HbP8$javascript_media_query, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, dwarn as $9HbP8$dwarn, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, use_href_accessor as $9HbP8$use_href_accessor, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { createSignal as $9HbP8$createSignal, onCleanup as $9HbP8$onCleanup, createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, Show as $9HbP8$Show, createRenderEffect as $9HbP8$createRenderEffect, createRoot as $9HbP8$createRoot, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createEffect as $9HbP8$createEffect, createUniqueId as $9HbP8$createUniqueId, untrack as $9HbP8$untrack, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, Index as $9HbP8$Index, on as $9HbP8$on, batch as $9HbP8$batch, createReaction as $9HbP8$createReaction } from "solid-js";
 import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, createComponent as $9HbP8$createComponent, mergeProps as $9HbP8$mergeProps, isServer as $9HbP8$isServer, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, className as $9HbP8$className, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, effect as $9HbP8$effect, classList as $9HbP8$classList, setAttribute as $9HbP8$setAttribute, getNextMarker as $9HbP8$getNextMarker, style as $9HbP8$style, Dynamic as $9HbP8$Dynamic, use as $9HbP8$use } from "solid-js/web";
 
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.8";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.10";
 
 /** @jsxImportSource solid-js */
 
@@ -182,6 +182,7 @@ function $29ec7cddbe1d3484$export$7f8bd308237ab5a5(get_displays_) {
   });
   return displays_by_key_;
 }
+const $29ec7cddbe1d3484$var$result_ids = ["search_result_id", "product_listing_result_id", "recommendation_id"];
 function $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
   displays_by_key_: displays_by_key_,
   merchant_: merchant_,
@@ -195,17 +196,24 @@ function $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
     },
     children: (product_id, index) => {
       const owner = $9HbP8$getOwner();
-      const display_accessor = $9HbP8$createMemo(() => displays_by_key_().get(product_id));
-      const [product_card_resource] = $9HbP8$createResource(display_accessor,
-      // re-render when the reference to the display object changes
-      // this should only be the case when the merchant or market changes and the new request has completed
-      display => {
+      const display_accessor = $9HbP8$createMemo(prev => {
+        const new_display = displays_by_key_().get(product_id);
+        if (prev && $29ec7cddbe1d3484$var$deep_equal(prev, new_display))
+          // If displays are identical, they haven't changed due to merchant/market changing OR we made a new query and the displays are the same. Return the old display (same object reference) to avoid re-rendering.
+          // This doesn't work if people mutate the displays from within the template but we hope they don't
+          // (We can't know if the display changing is due to merchant/market changing or a new query otherwise and don't want to run into https://gitlab.com/depict-ai/depict.ai/-/merge_requests/6890/diffs)
+          return prev;
+        return new_display;
+      });
+      const [product_card_resource] = $9HbP8$createResource(() => [merchant_(), market_(), display_accessor()],
+      // re-render when the reference to the display object changes or the merchant or market changes
+      // (We don't want to re-render if nothing has changed)
+      ([merchant, market, display]) => {
         // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
         return product_card_template_(display, {
           set_on_index_change: fn => $9HbP8$runWithOwner(owner, () => $9HbP8$createEffect(() => fn(index()))),
-          merchant: $9HbP8$untrack(merchant_),
-          // this means that the merchant and market provided to the template is wrong while we do another fetch, but I don't see how anyone would need to know the correct market there
-          market: $9HbP8$untrack(market_) // recommendation_grid can provide a sneaky undefined here just FYI
+          merchant: merchant,
+          market: market // recommendation_grid can provide a sneaky undefined here just FYI
         });
       });
 
@@ -220,15 +228,13 @@ function $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
           elements.push(element);
           // Add tracking ids
           if (!(element instanceof HTMLElement)) continue; // Apparently only HTMLElements have dataset
-          const {
-            dataset: dataset
-          } = element;
-          const {
-            search_result_id: search_result_id,
-            product_listing_result_id: product_listing_result_id,
-            recommendation_id: recommendation_id
-          } = display;
-          if (search_result_id) dataset.searchResultId = search_result_id;else if (product_listing_result_id) dataset.productListingResultId = product_listing_result_id;else if (recommendation_id) dataset.recommendationId = recommendation_id;
+          for (let i = 0; i < $29ec7cddbe1d3484$var$result_ids.length; i++) {
+            const id = $29ec7cddbe1d3484$var$result_ids[i];
+            const value = display[id];
+            if (value) Object.assign(element.dataset, $9HbP8$camelCasifyObject({
+              [id]: value
+            }));
+          }
         }
         do_per_elements_?.(elements, index);
       });
@@ -236,6 +242,23 @@ function $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
     }
   });
 }
+// Source: https://dmitripavlutin.com/how-to-compare-objects-in-javascript/
+function $29ec7cddbe1d3484$var$deep_equal(object1, object2) {
+  const keys1 = Object.keys(object1);
+  const keys2 = Object.keys(object2);
+  if (keys1.length !== keys2.length) return false;
+  for (const key of keys1) {
+    if ($29ec7cddbe1d3484$var$result_ids.includes(key)) continue; // ignore result ids that change per response
+    const val1 = object1[key];
+    const val2 = object2[key];
+    const areObjects = $29ec7cddbe1d3484$var$is_object(val1) && $29ec7cddbe1d3484$var$is_object(val2);
+    if (areObjects && !$29ec7cddbe1d3484$var$deep_equal(val1, val2) || !areObjects && val1 !== val2) return false;
+  }
+  return true;
+}
+function $29ec7cddbe1d3484$var$is_object(object) {
+  return object != null && typeof object === "object";
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $4fd48cb976bf1789$export$e1d52e4f0c7557a1 extends Error {}
@@ -598,51 +621,52 @@ function $3da8afe3ed57cf34$export$7da560f849543dff({
 }) {
   const is_showing_something = $9HbP8$createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
   const num_placeholders_ = () => 20;
+  const elements = (() => {
+    const _el$ = $9HbP8$getNextElement($3da8afe3ed57cf34$var$_tmpl$),
+      _el$2 = _el$.firstChild,
+      [_el$3, _co$] = $9HbP8$getNextMarker(_el$2.nextSibling),
+      _el$4 = _el$3.nextSibling,
+      [_el$5, _co$2] = $9HbP8$getNextMarker(_el$4.nextSibling);
+    $9HbP8$insert(_el$, (0, $a458486f22b22f63$export$a2cc176055f8f08), _el$3, _co$);
+    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $9HbP8$mergeProps({
+      get rows() {
+        return rows_object_();
+      },
+      layout: "grid",
+      element_attributes: {
+        class: "cards"
+      }
+    }, layout_options_, {
+      get children() {
+        return $9HbP8$createComponent((0, $9HbP8$Suspense), {
+          get fallback() {
+            return $6e41f1fde994db72$export$f33414a4df0afd3f({
+              num_placeholders_: num_placeholders_,
+              product_card_template_: product_card_template_
+            });
+          },
+          get children() {
+            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_ = $29ec7cddbe1d3484$export$7f8bd308237ab5a5($9HbP8$createMemo(() => recommendations_resource_() || []));
+              return $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
+                displays_by_key_: displays_by_key_,
+                merchant_: merchant_,
+                market_: market_,
+                product_card_template_: product_card_template_
+              });
+            })();
+          }
+        });
+      }
+    })), _el$5, _co$2);
+    return _el$;
+  })();
   return $9HbP8$createComponent((0, $9HbP8$Show), {
     get when() {
       return is_showing_something();
     },
-    get children() {
-      const _el$ = $9HbP8$getNextElement($3da8afe3ed57cf34$var$_tmpl$),
-        _el$2 = _el$.firstChild,
-        [_el$3, _co$] = $9HbP8$getNextMarker(_el$2.nextSibling),
-        _el$4 = _el$3.nextSibling,
-        [_el$5, _co$2] = $9HbP8$getNextMarker(_el$4.nextSibling);
-      $9HbP8$insert(_el$, (0, $a458486f22b22f63$export$a2cc176055f8f08), _el$3, _co$);
-      $9HbP8$insert(_el$, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $9HbP8$mergeProps({
-        get rows() {
-          return rows_object_();
-        },
-        layout: "grid",
-        element_attributes: {
-          class: "cards"
-        }
-      }, layout_options_, {
-        get children() {
-          return $9HbP8$createComponent((0, $9HbP8$Suspense), {
-            get fallback() {
-              return $6e41f1fde994db72$export$f33414a4df0afd3f({
-                num_placeholders_: num_placeholders_,
-                product_card_template_: product_card_template_
-              });
-            },
-            get children() {
-              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_ = $29ec7cddbe1d3484$export$7f8bd308237ab5a5($9HbP8$createMemo(() => recommendations_resource_() || []));
-                return $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
-                  displays_by_key_: displays_by_key_,
-                  merchant_: merchant_,
-                  market_: market_,
-                  product_card_template_: product_card_template_
-                });
-              })();
-            }
-          });
-        }
-      })), _el$5, _co$2);
-      return _el$;
-    }
+    children: elements
   });
 }
 const $9ea5383493360761$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button class="show-more major" type="button"></button>`, 2),
@@ -3410,8 +3434,8 @@ function $5efb5894079b220e$var$modify_only_local_filter(local_filter_object, sel
   }
   return modified_filter_object;
 }
-async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts) {
-  const body = await (0, $9HbP8$observer).wait_for_element("body");
+async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
+  const body = parent || (await (0, $9HbP8$observer).wait_for_element("body"));
   let dispose_and_remove;
   const open_modal_ = (extra_options_for_modal = {}, on_dispose) => {
     if (dispose_and_remove)
@@ -4248,7 +4272,7 @@ function $0449e7d49398c077$export$a1fd619a4743ca08({
   const [get_extra_displays, set_extra_displays_] = $9HbP8$createSignal([], {
     equals: false
   });
-  const displays_by_key_ = $29ec7cddbe1d3484$export$7f8bd308237ab5a5($9HbP8$createMemo(() => [...plp_results_().displays, ...get_extra_displays()]));
+  const displays_by_key_ = $29ec7cddbe1d3484$export$7f8bd308237ab5a5($9HbP8$createMemo(() => [...(plp_results_()?.displays || []), ...get_extra_displays()]));
   const percentage_in_view_ = $0e0b96a8dc1ad492$export$63dd0350f8559dda({
     get_last_result_in_viewport_: get_last_result_in_viewport_,
     displays_by_key_: displays_by_key_,
@@ -4367,18 +4391,18 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
               layout_options_: layout_options_,
               sort_or_filter_open_: sort_or_filter_open_
             });
-            $9HbP8$createComputed(() => {
-              if (!is_loading_()) return;
-              set_should_have_placeholders_rendered(true);
-              set_suspense_is_blocked(false);
-              is_just_after_plp_results_update = true;
-            });
             const block_suspense_if_needed = () => {
               if (!is_just_after_plp_results_update) return;
               is_just_after_plp_results_update = false;
               fallback_is_alive = false;
               set_suspense_is_blocked(true);
             };
+            $9HbP8$createComputed(() => {
+              if (!is_loading_()) return;
+              set_should_have_placeholders_rendered(true);
+              set_suspense_is_blocked(false);
+              is_just_after_plp_results_update = true;
+            });
             $9HbP8$createEffect($9HbP8$on(plp_results_, () => {
               if (!fallback_is_alive) {
                 // if all product card rendering functions after the initial rendering are synchronous the suspense boundary will never go into the fallback, so we don't know when they have finished rendering, and we can't block the suspense. Therefore, we're just doing it with this effect
@@ -4388,6 +4412,48 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
             }, {
               defer: true
             }));
+            /*
+            This suspense ensures that if someone has async templates, we still show placeholders until the product cards actually have finished rendering (automagically since they're createResource's)
+            We're creating it outside the <Show> so that we can benefit from <For>'s optimisation between changing results
+            (For the whole idea of the displays being cached to work we can't tear down and re-run ProductCards for every new result.
+            We have to keep ProductCards alive, but hidden, and feed them new data as soon as we had it)
+            */
+            const product_cards_when_data = $9HbP8$createComponent((0, $9HbP8$Suspense), {
+              get fallback() {
+                return (() => {
+                  fallback_is_alive = true;
+                  $9HbP8$onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
+                  return $9HbP8$createMemo(() => {
+                    // We need to be able to block the suspense since when async product cards are *rendering* we want to show the placeholders on initial load but not when loading more
+                    // In future we could have individual suspense's for each product card, but that's too much for now
+                    if (get_suspense_is_blocked()) return suspense_contents;
+                    set_should_have_placeholders_rendered(true); // just in case
+                    $9HbP8$onCleanup(() => set_should_have_placeholders_rendered(false));
+                    return rendered_placeholders; // I lifted the placeholders into the memo since we don't want to re-render them when switching from <Show> to <Suspense>
+                  });
+                })();
+              },
+
+              get children() {
+                return (() => {
+                  suspense_contents = $0449e7d49398c077$export$a1fd619a4743ca08({
+                    product_card_template_: product_card_template_,
+                    plp_results_: plp_results_,
+                    last_result_in_viewport_: last_result_in_viewport_,
+                    first_result_in_viewport_: first_result_in_viewport_,
+                    market_: market_,
+                    merchant_: merchant_,
+                    all_products_loaded_: all_products_loaded_,
+                    min_products_to_fetch_: min_products_to_fetch_,
+                    query_base_: query_base_,
+                    depict_api_: depict_api_,
+                    is_loading_: is_loading_
+                  });
+                  $9HbP8$onCleanup(() => suspense_contents = undefined);
+                  return suspense_contents;
+                })();
+              }
+            });
             return [$9HbP8$memo((0, $a458486f22b22f63$export$a2cc176055f8f08)), $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), {
               get cols_at_size() {
                 return modified_cols_at_size();
@@ -4411,44 +4477,7 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                   get fallback() {
                     return rendered_placeholders();
                   },
-                  get children() {
-                    return $9HbP8$createComponent((0, $9HbP8$Suspense), {
-                      get fallback() {
-                        return (() => {
-                          fallback_is_alive = true;
-                          $9HbP8$onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-                          return $9HbP8$createMemo(() => {
-                            // We need to be able to block the suspense since when async product cards are *rendering* we want to show the placeholders on initial load but not when loading more
-                            // In future we could have individual suspense's for each product card, but that's too much for now
-                            if (get_suspense_is_blocked()) return suspense_contents;
-                            set_should_have_placeholders_rendered(true); // just in case
-                            $9HbP8$onCleanup(() => set_should_have_placeholders_rendered(false));
-                            return rendered_placeholders; // I lifted the placeholders into the memo since we don't want to re-render them when switching from <Show> to <Suspense>
-                          });
-                        })();
-                      },
-
-                      get children() {
-                        return (() => {
-                          suspense_contents = $0449e7d49398c077$export$a1fd619a4743ca08({
-                            product_card_template_: product_card_template_,
-                            plp_results_: plp_results_,
-                            last_result_in_viewport_: last_result_in_viewport_,
-                            first_result_in_viewport_: first_result_in_viewport_,
-                            market_: market_,
-                            merchant_: merchant_,
-                            all_products_loaded_: all_products_loaded_,
-                            min_products_to_fetch_: min_products_to_fetch_,
-                            query_base_: query_base_,
-                            depict_api_: depict_api_,
-                            is_loading_: is_loading_
-                          });
-                          $9HbP8$onCleanup(() => suspense_contents = undefined);
-                          return suspense_contents;
-                        })();
-                      }
-                    });
-                  }
+                  children: product_cards_when_data
                 });
               }
             })];
@@ -7457,58 +7486,61 @@ function $172e1b898d457050$export$7de92c4c2205ebf3({
   product_card_template_: product_card_template_,
   showing_recommendation_rows_: showing_recommendation_rows_,
   view_more_button_ = true,
-  layout_options_: layout_options_
+  layout_options_: layout_options_,
+  all_products_loaded_: all_products_loaded_
 }) {
   const [get_showing_recommendation_rows] = showing_recommendation_rows_; // We reset this in after_submit in search.tsx FYI
   const rows_object = view_more_button_ ? $172e1b898d457050$var$make_state_saved_rows(showing_recommendation_rows_, i18n_) : "all";
   const [recommendations_resource] = $9HbP8$createResource(search_query_base_, query => depict_api_.get_recommended(query).then(r => r.displays));
   const is_showing_something = $9HbP8$createMemo(() => recommendations_resource.loading || recommendations_resource()?.length);
   const num_placeholders_ = $9HbP8$createMemo(() => (0, $7747fe1a8c5652e3$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...layout_options_().cols_at_size.map(([per_column]) => per_column)));
+  // Don't tear down elements every time one updates the page - don't put them within <Show>
+  const elements = (() => {
+    const _el$ = $9HbP8$getNextElement($172e1b898d457050$var$_tmpl$),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      [_el$4, _co$] = $9HbP8$getNextMarker(_el$3.nextSibling),
+      _el$5 = _el$4.nextSibling,
+      [_el$6, _co$2] = $9HbP8$getNextMarker(_el$5.nextSibling);
+    $9HbP8$insert(_el$2, () => i18n_.search_recs_title_());
+    $9HbP8$insert(_el$, (0, $a458486f22b22f63$export$a2cc176055f8f08), _el$4, _co$);
+    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $9HbP8$mergeProps({
+      rows: rows_object,
+      layout: "grid",
+      element_attributes: {
+        class: "cards"
+      }
+    }, layout_options_, {
+      get children() {
+        return $9HbP8$createComponent((0, $9HbP8$Suspense), {
+          get fallback() {
+            return $6e41f1fde994db72$export$f33414a4df0afd3f({
+              num_placeholders_: num_placeholders_,
+              product_card_template_: product_card_template_
+            });
+          },
+          get children() {
+            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_ = $29ec7cddbe1d3484$export$7f8bd308237ab5a5($9HbP8$createMemo(() => recommendations_resource() || []));
+              return $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
+                displays_by_key_: displays_by_key_,
+                merchant_: $9HbP8$createMemo(() => search_query_base_().tenant),
+                market_: $9HbP8$createMemo(() => search_query_base_().market),
+                product_card_template_: product_card_template_
+              });
+            })();
+          }
+        });
+      }
+    })), _el$6, _co$2);
+    return _el$;
+  })();
   return $9HbP8$createComponent((0, $9HbP8$Show), {
     get when() {
-      return is_showing_something();
+      return $9HbP8$memo(() => !!is_showing_something())() && all_products_loaded_();
     },
-    get children() {
-      const _el$ = $9HbP8$getNextElement($172e1b898d457050$var$_tmpl$),
-        _el$2 = _el$.firstChild,
-        _el$3 = _el$2.nextSibling,
-        [_el$4, _co$] = $9HbP8$getNextMarker(_el$3.nextSibling),
-        _el$5 = _el$4.nextSibling,
-        [_el$6, _co$2] = $9HbP8$getNextMarker(_el$5.nextSibling);
-      $9HbP8$insert(_el$2, () => i18n_.search_recs_title_());
-      $9HbP8$insert(_el$, (0, $a458486f22b22f63$export$a2cc176055f8f08), _el$4, _co$);
-      $9HbP8$insert(_el$, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $9HbP8$mergeProps({
-        rows: rows_object,
-        layout: "grid",
-        element_attributes: {
-          class: "cards"
-        }
-      }, layout_options_, {
-        get children() {
-          return $9HbP8$createComponent((0, $9HbP8$Suspense), {
-            get fallback() {
-              return $6e41f1fde994db72$export$f33414a4df0afd3f({
-                num_placeholders_: num_placeholders_,
-                product_card_template_: product_card_template_
-              });
-            },
-            get children() {
-              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_ = $29ec7cddbe1d3484$export$7f8bd308237ab5a5($9HbP8$createMemo(() => recommendations_resource() || []));
-                return $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
-                  displays_by_key_: displays_by_key_,
-                  merchant_: $9HbP8$createMemo(() => search_query_base_().tenant),
-                  market_: $9HbP8$createMemo(() => search_query_base_().market),
-                  product_card_template_: product_card_template_
-                });
-              })();
-            }
-          });
-        }
-      })), _el$6, _co$2);
-      return _el$;
-    }
+    children: elements
   });
 }
 function $172e1b898d457050$var$make_state_saved_rows([get_showing_recommendation_rows, set_showing_recommendation_rows], i18n_) {
@@ -9943,9 +9975,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
       }
     }), _el$19, _co$8);
     $9HbP8$insert(_el$7, $9HbP8$createComponent((0, $9HbP8$Show), {
-      get when() {
-        return get_all_products_loaded() && !disable_search_recommendations_;
-      },
+      when: !disable_search_recommendations_,
       keyed: false,
       get children() {
         return $9HbP8$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
@@ -9961,7 +9991,8 @@ function $7097477c78a89208$export$a54ec244c8863715({
               },
               showing_recommendation_rows_: showing_recommendation_rows_,
               view_more_button_: search_recs_view_more_,
-              product_card_template_: product_card_template_
+              product_card_template_: product_card_template_,
+              all_products_loaded_: get_all_products_loaded
             });
           }
         });
@@ -10071,6 +10102,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
     disable_scrolling_during_modal = true,
     bottom_distance_under_modal: bottom_distance_under_modal,
     render_instant_card: render_instant_card,
+    override_modal_element: override_modal_element,
     ...props_on_class
   }) {
     const owner = $9HbP8$getOwner() || $9HbP8$createRoot(() => $9HbP8$getOwner()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
@@ -10193,7 +10225,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
           enable_category_suggestions_: enable_category_suggestions,
           disable_scrolling_: disable_scrolling_during_modal,
           bottom_distance_under_modal_: bottom_distance_under_modal
-        });
+        }, override_modal_element);
         // This will add some default behaviour to open_modal_ if no style_props_ are supplied
         // The default behaviour is to align the modal with the input field if possible
         const modal_opening_effect = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "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",
@@ -238,7 +238,7 @@
     "@babel/runtime-corejs3": "^7.22.6",
     "@depict-ai/plp-styling": "^1.2.5",
     "@depict-ai/types": "^1.0.39",
-    "@depict-ai/utilishared": "^1.0.42",
+    "@depict-ai/utilishared": "^1.0.43",
     "solid-js": "^1.7.3"
   },
   "type": "module",