@depict-ai/ui 2.1.1 → 2.1.2

package/latest/index.js

@@ -6,7 +6,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! 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.1.1";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.2";
 const $4147651646da990a$var$fallback_operator = "in";
 const $4147651646da990a$var$fallback_token = "";
 const $4147651646da990a$var$legacy_filter_prefix = "filter_";
@@ -4568,8 +4568,7 @@ function $0449e7d49398c077$export$a1fd619a4743ca08({
   query_base_: query_base_,
   depict_api_: depict_api_,
   is_loading_: is_loading_,
-  content_blocks_: content_blocks_,
-  set_number_loaded_displays_: set_number_loaded_displays_
+  content_blocks_: content_blocks_
 }) {
   // 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();
@@ -4613,7 +4612,6 @@ function $0449e7d49398c077$export$a1fd619a4743ca08({
     query_base_: query_base_,
     depict_api_: depict_api_
   });
-  $9HbP8$createComputed(() => set_number_loaded_displays_(displays_by_key_().size));
   return $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
     merchant_: merchant_,
@@ -4807,26 +4805,18 @@ const $e7a7eb102ddc0c79$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=co
 function $e7a7eb102ddc0c79$export$791ef57e62e21c3f({
   content_blocks_: incoming_content_blocks,
   cols_at_size_: cols_at_size_,
-  number_of_items_shown_: number_of_items_shown_,
   set_top_row_shortened_by_: set_top_row_shortened_by_
 }) {
   // these are by row
   const [content_blocks, set_content_blocks] = $9HbP8$createStore([]);
   const n_cols_currently_showing_ = $bed740eef1769419$export$a79e666719b3647c(cols_at_size_);
-  const products_to_rows = products => {
-    const cols_currently_showing = n_cols_currently_showing_();
-    if (cols_currently_showing === null) return 0;
-    return Math.ceil(products / cols_currently_showing);
-  };
-  const showing_rows = $9HbP8$createMemo(() => products_to_rows(number_of_items_shown_()));
   $9HbP8$createEffect(() => {
     const incoming_value = incoming_content_blocks();
     if (!incoming_value) {
       set_content_blocks([]);
       return;
     }
-    const capped_value = incoming_value.slice(0, showing_rows()); // Don't show more content blocks than we have rows
-    set_content_blocks($9HbP8$reconcile(capped_value, {
+    set_content_blocks($9HbP8$reconcile(incoming_value, {
       key: "content"
     })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
   });
@@ -4883,12 +4873,12 @@ function $e7a7eb102ddc0c79$var$remap_blocks_to_index({
       for (let j = 0; j < i; j++) {
         const row = displaced_products[j];
         if (row === undefined) continue; // there were no blocks in this row
-        let items_in_row;
-        if (typeof row === "number") items_in_row = row;else {
-          items_in_row = row.filter(item => item).length;
-          displaced_products[j] = items_in_row;
+        let displaced_items_in_row;
+        if (typeof row === "number") displaced_items_in_row = row;else {
+          displaced_items_in_row = row.filter(item => item).length;
+          displaced_products[j] = displaced_items_in_row;
         }
-        displacement_by_added_blocks += items_in_row;
+        displacement_by_added_blocks += displaced_items_in_row;
       }
       const index_of_us_in_row = target_index - index_of_first_item_in_row;
       for (let j = 0; j < index_of_us_in_row; j++) if (displaced_products[i]?.[j])
@@ -4926,9 +4916,12 @@ function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_s
   const get_wrapped_blocks = $9HbP8$mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
     const get_span_columns = () => Math.min(block.span_columns, max_span_columns() ?? Infinity);
-    return $9HbP8$mergeProps1(block, {
-      // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: (() => {
+    const [rendering_delayed, set_rendering_delayed_] = $9HbP8$createSignal(true);
+    const content = $9HbP8$createComponent((0, $9HbP8$Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
         const _el$ = $9HbP8$getNextElement($e7a7eb102ddc0c79$var$_tmpl$);
         $9HbP8$insert(_el$, $9HbP8$createComponent($e7a7eb102ddc0c79$var$RenderContent, {
           get content() {
@@ -4951,7 +4944,16 @@ function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_s
           _v$3: undefined
         });
         return _el$;
-      })(),
+      }
+    });
+    return $9HbP8$mergeProps1(block, {
+      // Create content divs for the blocks with as much fine-grained diffing as possible?
+      content: () => {
+        // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
+        // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
+        set_rendering_delayed_(false);
+        return content;
+      },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
         return get_span_columns();
@@ -5045,8 +5047,7 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
             let fallback_is_alive = false;
             const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = $9HbP8$createSignal(true);
             const [top_row_shortened_by_, set_top_row_shortened_by_] = $9HbP8$createSignal(0);
-            const [product_card_suspense_is_in_fallback, set_product_card_suspense_is_in_fallback] = $9HbP8$createSignal(false);
-            const [number_loaded_displays, set_number_loaded_displays_] = $9HbP8$createSignal(0);
+            $9HbP8$createSignal(false);
             const modified_cols_at_size = $15aa76e6da02e5c2$export$cb5808ba002cdeed({
               layout_options_: layout_options_,
               sort_or_filter_open_: sort_or_filter_open_
@@ -5057,12 +5058,10 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                 for_id: for_id
               }) => for_id === id_currently_querying_for_())?.min_results_loaded ?? min_products_to_fetch_);
             });
-            const number_of_items_shown_ = $9HbP8$createMemo(() => is_loading_() || product_card_suspense_is_in_fallback() ? num_placeholders_() : number_loaded_displays());
             const doesnt_have_content_blocks = $9HbP8$createMemo(() => !content_blocks_by_row_());
             const content_blocks_ = $9HbP8$createMemo(() => doesnt_have_content_blocks() ? () => [] : $e7a7eb102ddc0c79$export$791ef57e62e21c3f({
               content_blocks_: content_blocks_by_row_,
               cols_at_size_: modified_cols_at_size,
-              number_of_items_shown_: number_of_items_shown_,
               set_top_row_shortened_by_: set_top_row_shortened_by_
             }));
             const rendered_placeholders = $9HbP8$createMemo(() => get_should_have_placeholders_rendered() ? $6e41f1fde994db72$export$f33414a4df0afd3f({
@@ -5102,8 +5101,6 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
               get fallback() {
                 fallback_is_alive = true;
                 $9HbP8$onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-                set_product_card_suspense_is_in_fallback(true); // Here for the content block code that needs to know how many items we're displaying
-                $9HbP8$onCleanup(() => set_product_card_suspense_is_in_fallback(false));
                 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
@@ -5128,8 +5125,7 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                     query_base_: query_base_,
                     depict_api_: depict_api_,
                     is_loading_: is_loading_,
-                    content_blocks_: content_blocks_,
-                    set_number_loaded_displays_: set_number_loaded_displays_
+                    content_blocks_: content_blocks_
                   });
                   $9HbP8$onCleanup(() => suspense_contents = undefined);
                   return suspense_contents;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "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

@@ -76,7 +76,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.1";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.2";
 const $a68b73fd7ba0853f$var$fallback_operator = "in";
 const $a68b73fd7ba0853f$var$fallback_token = "";
 const $a68b73fd7ba0853f$var$legacy_filter_prefix = "filter_";
@@ -4056,8 +4056,7 @@ function $0d3ee7000f047e67$export$a1fd619a4743ca08(_ref) {
     query_base_: query_base_,
     depict_api_: depict_api_,
     is_loading_: is_loading_,
-    content_blocks_: content_blocks_,
-    set_number_loaded_displays_: set_number_loaded_displays_
+    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();
@@ -4104,7 +4103,6 @@ function $0d3ee7000f047e67$export$a1fd619a4743ca08(_ref) {
     query_base_: query_base_,
     depict_api_: depict_api_
   });
-  $3hooq$solidjs.createComputed(() => set_number_loaded_displays_(displays_by_key_().size));
   return $76012c4468a53d1f$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
     merchant_: merchant_,
@@ -4299,26 +4297,18 @@ function $f8f375d6245ffff2$export$791ef57e62e21c3f(_ref) {
   let {
     content_blocks_: incoming_content_blocks,
     cols_at_size_: cols_at_size_,
-    number_of_items_shown_: number_of_items_shown_,
     set_top_row_shortened_by_: set_top_row_shortened_by_
   } = _ref;
   // these are by row
   const [content_blocks, set_content_blocks] = $3hooq$solidjsstore.createStore([]);
   const n_cols_currently_showing_ = $85fcdab554c24789$export$a79e666719b3647c(cols_at_size_);
-  const products_to_rows = products => {
-    const cols_currently_showing = n_cols_currently_showing_();
-    if (cols_currently_showing === null) return 0;
-    return Math.ceil(products / cols_currently_showing);
-  };
-  const showing_rows = $3hooq$solidjs.createMemo(() => products_to_rows(number_of_items_shown_()));
   $3hooq$solidjs.createEffect(() => {
     const incoming_value = incoming_content_blocks();
     if (!incoming_value) {
       set_content_blocks([]);
       return;
     }
-    const capped_value = incoming_value.slice(0, showing_rows()); // Don't show more content blocks than we have rows
-    set_content_blocks($3hooq$solidjsstore.reconcile(capped_value, {
+    set_content_blocks($3hooq$solidjsstore.reconcile(incoming_value, {
       key: "content"
     })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
   });
@@ -4376,12 +4366,12 @@ function $f8f375d6245ffff2$var$remap_blocks_to_index(_ref2) {
       for (let j = 0; j < i; j++) {
         const row = displaced_products[j];
         if (row === undefined) continue; // there were no blocks in this row
-        let items_in_row;
-        if (typeof row === "number") items_in_row = row;else {
-          items_in_row = row.filter(item => item).length;
-          displaced_products[j] = items_in_row;
+        let displaced_items_in_row;
+        if (typeof row === "number") displaced_items_in_row = row;else {
+          displaced_items_in_row = row.filter(item => item).length;
+          displaced_products[j] = displaced_items_in_row;
         }
-        displacement_by_added_blocks += items_in_row;
+        displacement_by_added_blocks += displaced_items_in_row;
       }
       const index_of_us_in_row = target_index - index_of_first_item_in_row;
       for (let j = 0; j < index_of_us_in_row; j++) {
@@ -4426,13 +4416,27 @@ function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       var _max_span_columns;
       return Math.min(block.span_columns, (_max_span_columns = max_span_columns()) !== null && _max_span_columns !== void 0 ? _max_span_columns : Infinity);
     };
+    const [rendering_delayed, set_rendering_delayed_] = $3hooq$solidjs.createSignal(true);
+    const content = $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
+        return $3hooq$solidjsweb.ssr($f8f375d6245ffff2$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "grid-column:" + "span ".concat($3hooq$solidjsweb.escape(get_span_columns(), true)) + (";grid-row:" + "span ".concat($3hooq$solidjsweb.escape(block.span_rows, true))) + (";spans_columns_variable_name:" + $3hooq$solidjsweb.escape(get_span_columns(), true)), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent($f8f375d6245ffff2$var$RenderContent, {
+          get content() {
+            return block.content;
+          }
+        })));
+      }
+    });
     return $3hooq$solidjs.mergeProps(block, {
       // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: $3hooq$solidjsweb.ssr($f8f375d6245ffff2$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "grid-column:" + "span ".concat($3hooq$solidjsweb.escape(get_span_columns(), true)) + (";grid-row:" + "span ".concat($3hooq$solidjsweb.escape(block.span_rows, true))) + (";spans_columns_variable_name:" + $3hooq$solidjsweb.escape(get_span_columns(), true)), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent($f8f375d6245ffff2$var$RenderContent, {
-        get content() {
-          return block.content;
-        }
-      }))),
+      content: () => {
+        // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
+        // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
+        set_rendering_delayed_(false);
+        return content;
+      },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
         return get_span_columns();
@@ -4523,8 +4527,7 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
           let fallback_is_alive = false;
           const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = $3hooq$solidjs.createSignal(true);
           const [top_row_shortened_by_, set_top_row_shortened_by_] = $3hooq$solidjs.createSignal(0);
-          const [product_card_suspense_is_in_fallback, set_product_card_suspense_is_in_fallback] = $3hooq$solidjs.createSignal(false);
-          const [number_loaded_displays, set_number_loaded_displays_] = $3hooq$solidjs.createSignal(0);
+          $3hooq$solidjs.createSignal(false);
           const modified_cols_at_size = $c749e60bca5000cb$export$cb5808ba002cdeed({
             layout_options_: layout_options_,
             sort_or_filter_open_: sort_or_filter_open_
@@ -4539,12 +4542,10 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
               return for_id === id_currently_querying_for_();
             })) === null || _get_scroll_restorati2 === void 0 ? void 0 : _get_scroll_restorati2.min_results_loaded) !== null && _get_scroll_restorati !== void 0 ? _get_scroll_restorati : min_products_to_fetch_);
           });
-          const number_of_items_shown_ = $3hooq$solidjs.createMemo(() => is_loading_() || product_card_suspense_is_in_fallback() ? num_placeholders_() : number_loaded_displays());
           const doesnt_have_content_blocks = $3hooq$solidjs.createMemo(() => !content_blocks_by_row_());
           const content_blocks_ = $3hooq$solidjs.createMemo(() => doesnt_have_content_blocks() ? () => [] : $f8f375d6245ffff2$export$791ef57e62e21c3f({
             content_blocks_: content_blocks_by_row_,
             cols_at_size_: modified_cols_at_size,
-            number_of_items_shown_: number_of_items_shown_,
             set_top_row_shortened_by_: set_top_row_shortened_by_
           }));
           const rendered_placeholders = $3hooq$solidjs.createMemo(() => get_should_have_placeholders_rendered() ? $e3915574cfd3466c$export$f33414a4df0afd3f({
@@ -4584,8 +4585,6 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
             get fallback() {
               fallback_is_alive = true;
               $3hooq$solidjs.onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-              set_product_card_suspense_is_in_fallback(true); // Here for the content block code that needs to know how many items we're displaying
-              $3hooq$solidjs.onCleanup(() => set_product_card_suspense_is_in_fallback(false));
               return $3hooq$solidjs.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
@@ -4610,8 +4609,7 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
                   query_base_: query_base_,
                   depict_api_: depict_api_,
                   is_loading_: is_loading_,
-                  content_blocks_: content_blocks_,
-                  set_number_loaded_displays_: set_number_loaded_displays_
+                  content_blocks_: content_blocks_
                 });
                 $3hooq$solidjs.onCleanup(() => suspense_contents = undefined);
                 return suspense_contents;

package/server/ES10/index.d.ts

@@ -6,8 +6,8 @@ import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/ap
 import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/api/SearchSuggestionsResponse";
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
-import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.1.1";
+import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
+export const version = "2.1.2";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -55,7 +55,7 @@ export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlac
  * The interface for a content block.
  * Please make sure that you don't have content blocks overlap as that will cause undefined behavior.
  * The height of the content block will be the height of the tallest item in a row, so if there are no products in a row the content block needs to "bring its own height".
- * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so, to avoid layout shifts and ensure scroll restoration works correctly.
+ * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so (see `ImagePlaceholder`), to avoid layout shifts and ensure scroll restoration works correctly.
  *
  * - `span_columns`: How many columns the block should span. This will be capped to the number of columns available.
  * - `span_rows`: How many rows the block should span.
@@ -670,7 +670,7 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
   query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
     failed?: true;
   }>;
-  list(input_req: ProductListingRequest): Promise<ProductListingResponseAfterURLCreator & {
+  list(input_req: ProductListingRequestV2): Promise<ProductListingResponseAfterURLCreator & {
     failed?: true;
   }>;
   get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{

package/server/ES10/index.js

@@ -9,7 +9,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.1";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.2";
 const $2855bffe06ef7a03$var$fallback_operator = "in";
 const $2855bffe06ef7a03$var$fallback_token = "";
 const $2855bffe06ef7a03$var$legacy_filter_prefix = "filter_";
@@ -3989,8 +3989,7 @@ function $45a8953d760b5e58$export$a1fd619a4743ca08(_ref) {
     query_base_: query_base_,
     depict_api_: depict_api_,
     is_loading_: is_loading_,
-    content_blocks_: content_blocks_,
-    set_number_loaded_displays_: set_number_loaded_displays_
+    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();
@@ -4037,7 +4036,6 @@ function $45a8953d760b5e58$export$a1fd619a4743ca08(_ref) {
     query_base_: query_base_,
     depict_api_: depict_api_
   });
-  $b8hua$createComputed(() => set_number_loaded_displays_(displays_by_key_().size));
   return $2d7bad8684bc7f44$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
     merchant_: merchant_,
@@ -4232,26 +4230,18 @@ function $ff7feae4dddd6073$export$791ef57e62e21c3f(_ref) {
   let {
     content_blocks_: incoming_content_blocks,
     cols_at_size_: cols_at_size_,
-    number_of_items_shown_: number_of_items_shown_,
     set_top_row_shortened_by_: set_top_row_shortened_by_
   } = _ref;
   // these are by row
   const [content_blocks, set_content_blocks] = $b8hua$createStore([]);
   const n_cols_currently_showing_ = $8244fdad249f8d5f$export$a79e666719b3647c(cols_at_size_);
-  const products_to_rows = products => {
-    const cols_currently_showing = n_cols_currently_showing_();
-    if (cols_currently_showing === null) return 0;
-    return Math.ceil(products / cols_currently_showing);
-  };
-  const showing_rows = $b8hua$createMemo(() => products_to_rows(number_of_items_shown_()));
   $b8hua$createEffect(() => {
     const incoming_value = incoming_content_blocks();
     if (!incoming_value) {
       set_content_blocks([]);
       return;
     }
-    const capped_value = incoming_value.slice(0, showing_rows()); // Don't show more content blocks than we have rows
-    set_content_blocks($b8hua$reconcile(capped_value, {
+    set_content_blocks($b8hua$reconcile(incoming_value, {
       key: "content"
     })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
   });
@@ -4309,12 +4299,12 @@ function $ff7feae4dddd6073$var$remap_blocks_to_index(_ref2) {
       for (let j = 0; j < i; j++) {
         const row = displaced_products[j];
         if (row === undefined) continue; // there were no blocks in this row
-        let items_in_row;
-        if (typeof row === "number") items_in_row = row;else {
-          items_in_row = row.filter(item => item).length;
-          displaced_products[j] = items_in_row;
+        let displaced_items_in_row;
+        if (typeof row === "number") displaced_items_in_row = row;else {
+          displaced_items_in_row = row.filter(item => item).length;
+          displaced_products[j] = displaced_items_in_row;
         }
-        displacement_by_added_blocks += items_in_row;
+        displacement_by_added_blocks += displaced_items_in_row;
       }
       const index_of_us_in_row = target_index - index_of_first_item_in_row;
       for (let j = 0; j < index_of_us_in_row; j++) {
@@ -4359,13 +4349,27 @@ function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       var _max_span_columns;
       return Math.min(block.span_columns, (_max_span_columns = max_span_columns()) !== null && _max_span_columns !== void 0 ? _max_span_columns : Infinity);
     };
+    const [rendering_delayed, set_rendering_delayed_] = $b8hua$createSignal(true);
+    const content = $b8hua$createComponent((0, $b8hua$Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
+        return $b8hua$ssr($ff7feae4dddd6073$var$_tmpl$, $b8hua$ssrHydrationKey(), "grid-column:" + "span ".concat($b8hua$escape(get_span_columns(), true)) + (";grid-row:" + "span ".concat($b8hua$escape(block.span_rows, true))) + (";spans_columns_variable_name:" + $b8hua$escape(get_span_columns(), true)), $b8hua$escape($b8hua$createComponent($ff7feae4dddd6073$var$RenderContent, {
+          get content() {
+            return block.content;
+          }
+        })));
+      }
+    });
     return $b8hua$mergeProps1(block, {
       // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: $b8hua$ssr($ff7feae4dddd6073$var$_tmpl$, $b8hua$ssrHydrationKey(), "grid-column:" + "span ".concat($b8hua$escape(get_span_columns(), true)) + (";grid-row:" + "span ".concat($b8hua$escape(block.span_rows, true))) + (";spans_columns_variable_name:" + $b8hua$escape(get_span_columns(), true)), $b8hua$escape($b8hua$createComponent($ff7feae4dddd6073$var$RenderContent, {
-        get content() {
-          return block.content;
-        }
-      }))),
+      content: () => {
+        // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
+        // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
+        set_rendering_delayed_(false);
+        return content;
+      },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
         return get_span_columns();
@@ -4456,8 +4460,7 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
           let fallback_is_alive = false;
           const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = $b8hua$createSignal(true);
           const [top_row_shortened_by_, set_top_row_shortened_by_] = $b8hua$createSignal(0);
-          const [product_card_suspense_is_in_fallback, set_product_card_suspense_is_in_fallback] = $b8hua$createSignal(false);
-          const [number_loaded_displays, set_number_loaded_displays_] = $b8hua$createSignal(0);
+          $b8hua$createSignal(false);
           const modified_cols_at_size = $b2dbaafb23d00c7f$export$cb5808ba002cdeed({
             layout_options_: layout_options_,
             sort_or_filter_open_: sort_or_filter_open_
@@ -4472,12 +4475,10 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
               return for_id === id_currently_querying_for_();
             })) === null || _get_scroll_restorati2 === void 0 ? void 0 : _get_scroll_restorati2.min_results_loaded) !== null && _get_scroll_restorati !== void 0 ? _get_scroll_restorati : min_products_to_fetch_);
           });
-          const number_of_items_shown_ = $b8hua$createMemo(() => is_loading_() || product_card_suspense_is_in_fallback() ? num_placeholders_() : number_loaded_displays());
           const doesnt_have_content_blocks = $b8hua$createMemo(() => !content_blocks_by_row_());
           const content_blocks_ = $b8hua$createMemo(() => doesnt_have_content_blocks() ? () => [] : $ff7feae4dddd6073$export$791ef57e62e21c3f({
             content_blocks_: content_blocks_by_row_,
             cols_at_size_: modified_cols_at_size,
-            number_of_items_shown_: number_of_items_shown_,
             set_top_row_shortened_by_: set_top_row_shortened_by_
           }));
           const rendered_placeholders = $b8hua$createMemo(() => get_should_have_placeholders_rendered() ? $bdd80c7862246dc2$export$f33414a4df0afd3f({
@@ -4517,8 +4518,6 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
             get fallback() {
               fallback_is_alive = true;
               $b8hua$onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-              set_product_card_suspense_is_in_fallback(true); // Here for the content block code that needs to know how many items we're displaying
-              $b8hua$onCleanup(() => set_product_card_suspense_is_in_fallback(false));
               return $b8hua$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
@@ -4543,8 +4542,7 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
                   query_base_: query_base_,
                   depict_api_: depict_api_,
                   is_loading_: is_loading_,
-                  content_blocks_: content_blocks_,
-                  set_number_loaded_displays_: set_number_loaded_displays_
+                  content_blocks_: content_blocks_
                 });
                 $b8hua$onCleanup(() => suspense_contents = undefined);
                 return suspense_contents;

package/server/latest/index.cjs

@@ -70,7 +70,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.1";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.2";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -3755,8 +3755,7 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
   query_base_: query_base_,
   depict_api_: depict_api_,
   is_loading_: is_loading_,
-  content_blocks_: content_blocks_,
-  set_number_loaded_displays_: set_number_loaded_displays_
+  content_blocks_: content_blocks_
 }) {
   // 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();
@@ -3800,7 +3799,6 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
     query_base_: query_base_,
     depict_api_: depict_api_
   });
-  $5vyXB$solidjs.createComputed(() => set_number_loaded_displays_(displays_by_key_().size));
   return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
     merchant_: merchant_,
@@ -3983,26 +3981,18 @@ const $d92f338ba8f9da9b$var$_tmpl$ = ["<div", ' class="content-block-wrapper" st
 function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
   content_blocks_: incoming_content_blocks,
   cols_at_size_: cols_at_size_,
-  number_of_items_shown_: number_of_items_shown_,
   set_top_row_shortened_by_: set_top_row_shortened_by_
 }) {
   // these are by row
   const [content_blocks, set_content_blocks] = $5vyXB$solidjsstore.createStore([]);
   const n_cols_currently_showing_ = $055384b985678603$export$a79e666719b3647c(cols_at_size_);
-  const products_to_rows = products => {
-    const cols_currently_showing = n_cols_currently_showing_();
-    if (cols_currently_showing === null) return 0;
-    return Math.ceil(products / cols_currently_showing);
-  };
-  const showing_rows = $5vyXB$solidjs.createMemo(() => products_to_rows(number_of_items_shown_()));
   $5vyXB$solidjs.createEffect(() => {
     const incoming_value = incoming_content_blocks();
     if (!incoming_value) {
       set_content_blocks([]);
       return;
     }
-    const capped_value = incoming_value.slice(0, showing_rows()); // Don't show more content blocks than we have rows
-    set_content_blocks($5vyXB$solidjsstore.reconcile(capped_value, {
+    set_content_blocks($5vyXB$solidjsstore.reconcile(incoming_value, {
       key: "content"
     })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
   });
@@ -4059,12 +4049,12 @@ function $d92f338ba8f9da9b$var$remap_blocks_to_index({
       for (let j = 0; j < i; j++) {
         const row = displaced_products[j];
         if (row === undefined) continue; // there were no blocks in this row
-        let items_in_row;
-        if (typeof row === "number") items_in_row = row;else {
-          items_in_row = row.filter(item => item).length;
-          displaced_products[j] = items_in_row;
+        let displaced_items_in_row;
+        if (typeof row === "number") displaced_items_in_row = row;else {
+          displaced_items_in_row = row.filter(item => item).length;
+          displaced_products[j] = displaced_items_in_row;
         }
-        displacement_by_added_blocks += items_in_row;
+        displacement_by_added_blocks += displaced_items_in_row;
       }
       const index_of_us_in_row = target_index - index_of_first_item_in_row;
       for (let j = 0; j < index_of_us_in_row; j++) if (displaced_products[i]?.[j])
@@ -4102,13 +4092,27 @@ function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_s
   const get_wrapped_blocks = $5vyXB$solidjs.mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
     const get_span_columns = () => Math.min(block.span_columns, max_span_columns() ?? Infinity);
+    const [rendering_delayed, set_rendering_delayed_] = $5vyXB$solidjs.createSignal(true);
+    const content = $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
+        return $5vyXB$solidjsweb.ssr($d92f338ba8f9da9b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "grid-column:" + `span ${$5vyXB$solidjsweb.escape(get_span_columns(), true)}` + (";grid-row:" + `span ${$5vyXB$solidjsweb.escape(block.span_rows, true)}`) + (";spans_columns_variable_name:" + $5vyXB$solidjsweb.escape(get_span_columns(), true)), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
+          get content() {
+            return block.content;
+          }
+        })));
+      }
+    });
     return $5vyXB$solidjs.mergeProps(block, {
       // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: $5vyXB$solidjsweb.ssr($d92f338ba8f9da9b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "grid-column:" + `span ${$5vyXB$solidjsweb.escape(get_span_columns(), true)}` + (";grid-row:" + `span ${$5vyXB$solidjsweb.escape(block.span_rows, true)}`) + (";spans_columns_variable_name:" + $5vyXB$solidjsweb.escape(get_span_columns(), true)), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
-        get content() {
-          return block.content;
-        }
-      }))),
+      content: () => {
+        // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
+        // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
+        set_rendering_delayed_(false);
+        return content;
+      },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
         return get_span_columns();
@@ -4196,8 +4200,7 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
           let fallback_is_alive = false;
           const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = $5vyXB$solidjs.createSignal(true);
           const [top_row_shortened_by_, set_top_row_shortened_by_] = $5vyXB$solidjs.createSignal(0);
-          const [product_card_suspense_is_in_fallback, set_product_card_suspense_is_in_fallback] = $5vyXB$solidjs.createSignal(false);
-          const [number_loaded_displays, set_number_loaded_displays_] = $5vyXB$solidjs.createSignal(0);
+          $5vyXB$solidjs.createSignal(false);
           const modified_cols_at_size = $738c3a81fc46a340$export$cb5808ba002cdeed({
             layout_options_: layout_options_,
             sort_or_filter_open_: sort_or_filter_open_
@@ -4208,12 +4211,10 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
               for_id: for_id
             }) => for_id === id_currently_querying_for_())?.min_results_loaded ?? min_products_to_fetch_);
           });
-          const number_of_items_shown_ = $5vyXB$solidjs.createMemo(() => is_loading_() || product_card_suspense_is_in_fallback() ? num_placeholders_() : number_loaded_displays());
           const doesnt_have_content_blocks = $5vyXB$solidjs.createMemo(() => !content_blocks_by_row_());
           const content_blocks_ = $5vyXB$solidjs.createMemo(() => doesnt_have_content_blocks() ? () => [] : $d92f338ba8f9da9b$export$791ef57e62e21c3f({
             content_blocks_: content_blocks_by_row_,
             cols_at_size_: modified_cols_at_size,
-            number_of_items_shown_: number_of_items_shown_,
             set_top_row_shortened_by_: set_top_row_shortened_by_
           }));
           const rendered_placeholders = $5vyXB$solidjs.createMemo(() => get_should_have_placeholders_rendered() ? $0caf87eaa19079da$export$f33414a4df0afd3f({
@@ -4253,8 +4254,6 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
             get fallback() {
               fallback_is_alive = true;
               $5vyXB$solidjs.onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-              set_product_card_suspense_is_in_fallback(true); // Here for the content block code that needs to know how many items we're displaying
-              $5vyXB$solidjs.onCleanup(() => set_product_card_suspense_is_in_fallback(false));
               return $5vyXB$solidjs.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
@@ -4279,8 +4278,7 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                   query_base_: query_base_,
                   depict_api_: depict_api_,
                   is_loading_: is_loading_,
-                  content_blocks_: content_blocks_,
-                  set_number_loaded_displays_: set_number_loaded_displays_
+                  content_blocks_: content_blocks_
                 });
                 $5vyXB$solidjs.onCleanup(() => suspense_contents = undefined);
                 return suspense_contents;