@depict-ai/ui 2.1.1 → 2.1.2

package/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_";
@@ -4970,8 +4970,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();
@@ -5018,7 +5017,6 @@ function $0d3ee7000f047e67$export$a1fd619a4743ca08(_ref) {
     query_base_: query_base_,
     depict_api_: depict_api_
   });
-  $52FdA$solidjs.createComputed(() => set_number_loaded_displays_(displays_by_key_().size));
   return $76012c4468a53d1f$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
     merchant_: merchant_,
@@ -5224,26 +5222,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] = $52FdA$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 = $52FdA$solidjs.createMemo(() => products_to_rows(number_of_items_shown_()));
   $52FdA$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($52FdA$solidjsstore.reconcile(capped_value, {
+    set_content_blocks($52FdA$solidjsstore.reconcile(incoming_value, {
       key: "content"
     })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
   });
@@ -5301,12 +5291,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++) {
@@ -5351,9 +5341,12 @@ 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);
     };
-    return $52FdA$solidjs.mergeProps(block, {
-      // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: (() => {
+    const [rendering_delayed, set_rendering_delayed_] = $52FdA$solidjs.createSignal(true);
+    const content = $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
         const _el$ = $52FdA$solidjsweb.getNextElement($f8f375d6245ffff2$var$_tmpl$);
         $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent($f8f375d6245ffff2$var$RenderContent, {
           get content() {
@@ -5376,7 +5369,16 @@ function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_s
           _v$3: undefined
         });
         return _el$;
-      })(),
+      }
+    });
+    return $52FdA$solidjs.mergeProps(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();
@@ -5473,8 +5475,7 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
             let fallback_is_alive = false;
             const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = $52FdA$solidjs.createSignal(true);
             const [top_row_shortened_by_, set_top_row_shortened_by_] = $52FdA$solidjs.createSignal(0);
-            const [product_card_suspense_is_in_fallback, set_product_card_suspense_is_in_fallback] = $52FdA$solidjs.createSignal(false);
-            const [number_loaded_displays, set_number_loaded_displays_] = $52FdA$solidjs.createSignal(0);
+            $52FdA$solidjs.createSignal(false);
             const modified_cols_at_size = $c749e60bca5000cb$export$cb5808ba002cdeed({
               layout_options_: layout_options_,
               sort_or_filter_open_: sort_or_filter_open_
@@ -5489,12 +5490,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_ = $52FdA$solidjs.createMemo(() => is_loading_() || product_card_suspense_is_in_fallback() ? num_placeholders_() : number_loaded_displays());
             const doesnt_have_content_blocks = $52FdA$solidjs.createMemo(() => !content_blocks_by_row_());
             const content_blocks_ = $52FdA$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 = $52FdA$solidjs.createMemo(() => get_should_have_placeholders_rendered() ? $e3915574cfd3466c$export$f33414a4df0afd3f({
@@ -5534,8 +5533,6 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
               get fallback() {
                 fallback_is_alive = true;
                 $52FdA$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
-                $52FdA$solidjs.onCleanup(() => set_product_card_suspense_is_in_fallback(false));
                 return $52FdA$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
@@ -5560,8 +5557,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_
                   });
                   $52FdA$solidjs.onCleanup(() => suspense_contents = undefined);
                   return suspense_contents;

package/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/ES10/index.js

@@ -9,7 +9,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$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_";
@@ -4903,8 +4903,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();
@@ -4951,7 +4950,6 @@ function $45a8953d760b5e58$export$a1fd619a4743ca08(_ref) {
     query_base_: query_base_,
     depict_api_: depict_api_
   });
-  $8tj43$createComputed(() => set_number_loaded_displays_(displays_by_key_().size));
   return $2d7bad8684bc7f44$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
     merchant_: merchant_,
@@ -5157,26 +5155,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] = $8tj43$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 = $8tj43$createMemo(() => products_to_rows(number_of_items_shown_()));
   $8tj43$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($8tj43$reconcile(capped_value, {
+    set_content_blocks($8tj43$reconcile(incoming_value, {
       key: "content"
     })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
   });
@@ -5234,12 +5224,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++) {
@@ -5284,9 +5274,12 @@ 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);
     };
-    return $8tj43$mergeProps1(block, {
-      // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: (() => {
+    const [rendering_delayed, set_rendering_delayed_] = $8tj43$createSignal(true);
+    const content = $8tj43$createComponent((0, $8tj43$Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
         const _el$ = $8tj43$getNextElement($ff7feae4dddd6073$var$_tmpl$);
         $8tj43$insert(_el$, $8tj43$createComponent($ff7feae4dddd6073$var$RenderContent, {
           get content() {
@@ -5309,7 +5302,16 @@ function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_s
           _v$3: undefined
         });
         return _el$;
-      })(),
+      }
+    });
+    return $8tj43$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();
@@ -5406,8 +5408,7 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
             let fallback_is_alive = false;
             const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = $8tj43$createSignal(true);
             const [top_row_shortened_by_, set_top_row_shortened_by_] = $8tj43$createSignal(0);
-            const [product_card_suspense_is_in_fallback, set_product_card_suspense_is_in_fallback] = $8tj43$createSignal(false);
-            const [number_loaded_displays, set_number_loaded_displays_] = $8tj43$createSignal(0);
+            $8tj43$createSignal(false);
             const modified_cols_at_size = $b2dbaafb23d00c7f$export$cb5808ba002cdeed({
               layout_options_: layout_options_,
               sort_or_filter_open_: sort_or_filter_open_
@@ -5422,12 +5423,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_ = $8tj43$createMemo(() => is_loading_() || product_card_suspense_is_in_fallback() ? num_placeholders_() : number_loaded_displays());
             const doesnt_have_content_blocks = $8tj43$createMemo(() => !content_blocks_by_row_());
             const content_blocks_ = $8tj43$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 = $8tj43$createMemo(() => get_should_have_placeholders_rendered() ? $bdd80c7862246dc2$export$f33414a4df0afd3f({
@@ -5467,8 +5466,6 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
               get fallback() {
                 fallback_is_alive = true;
                 $8tj43$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
-                $8tj43$onCleanup(() => set_product_card_suspense_is_in_fallback(false));
                 return $8tj43$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
@@ -5493,8 +5490,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_
                   });
                   $8tj43$onCleanup(() => suspense_contents = undefined);
                   return suspense_contents;

package/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_";
@@ -4632,8 +4632,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();
@@ -4677,7 +4676,6 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
     query_base_: query_base_,
     depict_api_: depict_api_
   });
-  $gVhhF$solidjs.createComputed(() => set_number_loaded_displays_(displays_by_key_().size));
   return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
     merchant_: merchant_,
@@ -4871,26 +4869,18 @@ const $d92f338ba8f9da9b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<d
 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] = $gVhhF$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 = $gVhhF$solidjs.createMemo(() => products_to_rows(number_of_items_shown_()));
   $gVhhF$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($gVhhF$solidjsstore.reconcile(capped_value, {
+    set_content_blocks($gVhhF$solidjsstore.reconcile(incoming_value, {
       key: "content"
     })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
   });
@@ -4947,12 +4937,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])
@@ -4990,9 +4980,12 @@ function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_s
   const get_wrapped_blocks = $gVhhF$solidjs.mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
     const get_span_columns = () => Math.min(block.span_columns, max_span_columns() ?? Infinity);
-    return $gVhhF$solidjs.mergeProps(block, {
-      // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: (() => {
+    const [rendering_delayed, set_rendering_delayed_] = $gVhhF$solidjs.createSignal(true);
+    const content = $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
         const _el$ = $gVhhF$solidjsweb.getNextElement($d92f338ba8f9da9b$var$_tmpl$);
         $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
           get content() {
@@ -5015,7 +5008,16 @@ function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_s
           _v$3: undefined
         });
         return _el$;
-      })(),
+      }
+    });
+    return $gVhhF$solidjs.mergeProps(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();
@@ -5109,8 +5111,7 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
             let fallback_is_alive = false;
             const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = $gVhhF$solidjs.createSignal(true);
             const [top_row_shortened_by_, set_top_row_shortened_by_] = $gVhhF$solidjs.createSignal(0);
-            const [product_card_suspense_is_in_fallback, set_product_card_suspense_is_in_fallback] = $gVhhF$solidjs.createSignal(false);
-            const [number_loaded_displays, set_number_loaded_displays_] = $gVhhF$solidjs.createSignal(0);
+            $gVhhF$solidjs.createSignal(false);
             const modified_cols_at_size = $738c3a81fc46a340$export$cb5808ba002cdeed({
               layout_options_: layout_options_,
               sort_or_filter_open_: sort_or_filter_open_
@@ -5121,12 +5122,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_ = $gVhhF$solidjs.createMemo(() => is_loading_() || product_card_suspense_is_in_fallback() ? num_placeholders_() : number_loaded_displays());
             const doesnt_have_content_blocks = $gVhhF$solidjs.createMemo(() => !content_blocks_by_row_());
             const content_blocks_ = $gVhhF$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 = $gVhhF$solidjs.createMemo(() => get_should_have_placeholders_rendered() ? $0caf87eaa19079da$export$f33414a4df0afd3f({
@@ -5166,8 +5165,6 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
               get fallback() {
                 fallback_is_alive = true;
                 $gVhhF$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
-                $gVhhF$solidjs.onCleanup(() => set_product_card_suspense_is_in_fallback(false));
                 return $gVhhF$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
@@ -5192,8 +5189,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_
                   });
                   $gVhhF$solidjs.onCleanup(() => suspense_contents = undefined);
                   return suspense_contents;

package/latest/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<{