@depict-ai/ui 0.0.80 → 0.0.82

package/dist/main.js

@@ -35,7 +35,7 @@ $parcel$export(module.exports, "SolidFormatPrice", () => $5fc9fc23df1591db$expor
 $parcel$export(module.exports, "connect_search_field_height_to_aligner_height", () => $246e3e89a097f014$export$828dcdd425fd3231);
 $parcel$export(module.exports, "PageReplacer", () => $37e96a5ebc768cc7$export$3ccaa27d81dd8556);
 $parcel$export(module.exports, "version", () => $ae93561d5649a847$export$83d89fbfd8236492);
-/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.80";
+/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.82";
 
 
 
@@ -463,134 +463,6 @@ function $08fa9d20f7ec85af$export$83fd5de5504a7a67({ formatted_number_of_results
 
 
 
-/** @jsxImportSource solid-js */ 
-function $1089684cb32bf922$export$daf1a0aef2143a61({ first_result_in_viewport_: [, set_first_result_in_viewport_] , last_result_in_viewport_: [, set_last_result_in_viewport_]  }) {
-    const intersecting = new Set();
-    const counting_is = new IntersectionObserver((records)=>{
-        let kids;
-        for (const { intersectionRatio: intersectionRatio , target: target  } of records){
-            const intersects = intersectionRatio > 0;
-            const has_target = intersecting.has(target);
-            if (intersects && !has_target) intersecting.add(target);
-            else if (!intersects && has_target) intersecting.delete(target);
-        }
-        const numbers = [
-            ...intersecting
-        ].map((el)=>{
-            const index = (kids ||= [
-                ...el.parentElement?.children || []
-            ]).indexOf(el);
-            if (index < 0) return undefined;
-            return index + 1;
-        }).filter((item)=>item != undefined);
-        set_first_result_in_viewport_(Math.min(...numbers));
-        set_last_result_in_viewport_(Math.max(...numbers));
-    });
-    (0, $46MJV$solidjs.onCleanup)(()=>counting_is.disconnect());
-    return (els)=>{
-        for(let i = 0; i < els?.length; i++){
-            const el = els[i];
-            if (el instanceof Element) counting_is.observe(el);
-        }
-    };
-}
-
-
-/** @jsxImportSource solid-js */ 
-
-function $6154d0a3d9e9b16e$export$36aef51ac7a64eae({ depict_api_: depict_api_ , min_products_to_fetch_: min_products_to_fetch_ , all_products_loaded_: all_products_loaded_ , query_base_: query_base_ , observe_for_counting_: observe_for_counting_ , start_cursor_: start_cursor_  }) {
-    let last_loaded = +new Date();
-    let dead = false;
-    let current_cursor = start_cursor_;
-    const target_to_info = new Map();
-    const tear_down = (0, $46MJV$depictaiutilishared.catchify)((loaded_all_products)=>{
-        intersection_observer.disconnect();
-        target_to_info.clear();
-        dead = true;
-        if (loaded_all_products) all_products_loaded_?.[1]?.(true);
-    });
-    const deduped_load_more = (0, $46MJV$depictaiutilishared.deparallelize)(async (...args)=>{
-        const now = +new Date();
-        // load faster if someone is scrolling aggressively
-        const num_to_load = now - last_loaded < 10000 ? min_products_to_fetch_ * 5 : min_products_to_fetch_;
-        const new_cursor = await $6154d0a3d9e9b16e$var$load_more(...args, num_to_load);
-        if (new_cursor) current_cursor = new_cursor;
-        last_loaded = now;
-    });
-    const intersection_observer = new IntersectionObserver((0, $46MJV$depictaiutilishared.catchify)((records)=>{
-        let num_children;
-        for(let i = 0; i < records.length; i++){
-            // we assume they all have the same parent 👀
-            const record = records[i];
-            if (record.intersectionRatio <= 0) continue;
-            const { target: target  } = record;
-            const parent = target.parentElement;
-            if (!parent) continue; // we're not in DOM or something funky
-            if (num_children == undefined) {
-                const kids = parent.childElementCount;
-                if (isNaN(kids)) continue;
-                num_children = kids;
-            }
-            const info = target_to_info.get(target);
-            if (!info) continue; // How did this happen?
-            let actual_index_;
-            for(let i = 0; i < num_children; i++){
-                const child = parent.children[i];
-                if (child === target) {
-                    actual_index_ = i;
-                    break;
-                }
-            }
-            if (actual_index_ == undefined) continue;
-            const in_range = actual_index_ / num_children * 100;
-            const range_to_load_at = current_cursor === start_cursor_ ? 50 : 75; // if first load, load earlier
-            if (in_range > range_to_load_at) {
-                // load if more than 75% of elements are in view, this will make so that we load sooner and sooner which maybe (?) will adjust to people scrolling quickly :)
-                intersection_observer.disconnect(); // no need to watch these els anymore
-                deduped_load_more({
-                    depict_api_: depict_api_,
-                    info_: info,
-                    container_: parent,
-                    query_base_: query_base_,
-                    on_reached_end_: ()=>tear_down(true),
-                    cursor_: current_cursor
-                });
-            }
-        }
-    }));
-    (0, $46MJV$solidjs.onCleanup)(tear_down);
-    return (items, _display, info_)=>{
-        observe_for_counting_(items);
-        if (dead) return items;
-        for(let i = 0; i < items?.length; i++){
-            const item = items[i];
-            if (item instanceof Element) {
-                target_to_info.set(item, info_);
-                intersection_observer.observe(item);
-            }
-        }
-        return items;
-    };
-}
-async function $6154d0a3d9e9b16e$var$load_more({ depict_api_: depict_api_ , query_base_: query_base_ , container_: container_ , on_reached_end_: on_reached_end_ , info_: { rendering_options: rendering_options , t: t  } , cursor_: cursor_  }, num_results_to_load) {
-    (0, $46MJV$depictaiutilishared.dlog)("SearchResults: Loading more");
-    const base_part = (0, $46MJV$solidjs.untrack)(query_base_);
-    const api_response = await depict_api_["query_id" in base_part ? "list" : "query"]({
-        cursor: cursor_,
-        limit: num_results_to_load,
-        ...base_part
-    });
-    const new_displays = api_response?.displays || [];
-    const { elements: elements  } = await (0, $46MJV$depictaiutilishared.Rec_Renderer)(t, {
-        ...rendering_options,
-        recs: new_displays || []
-    });
-    if (elements) container_.append(...elements);
-    else (0, $46MJV$depictaiutilishared.dlog)("SearchResults: Got no elements, that's weird", api_response);
-    if ("cursor" in api_response) return api_response.cursor;
-    else if (!api_response?.failed) on_reached_end_();
-}
-
 
 
 
@@ -826,13 +698,8 @@ function $2b4e3538e183d885$export$ef6006467f04ee41({ i18n_: i18n_ , expanded_hie
 ]);
 
 
-/*
- * Usually product templates are somewhat height-elastic depending on the content, i.e. if the title is longer we might up to two extra rows for this. That means that the placeholders almost never will reflect the size of the actual content when we do scroll restoration. This magic number specifies how many extra placeholders we should render everytime to compensate for this, since if the placeholders are in total shorter than the old scroll location the scroll restoration won't work.
- */ const $39d15a684cb3e309$export$6c9030e511152266 = 30;
-
-
 function $8e863dc22b06b688$export$a2cc176055f8f08() {
-    return document.createComment("Please try setting `colsAtSize` on `DepictProvider`/`DepictSearch` to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.");
+    return document.createComment("Please try setting `colsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.");
 }
 
 
@@ -885,77 +752,347 @@ function $0f2f58dd60b11888$export$b69d0d92862de18b(props) {
 }
 
 
-const $8d94abc871e13baf$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="PLP-results"></div>`, 2), $8d94abc871e13baf$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="cards"></div>`, 2);
-let $8d94abc871e13baf$var$cached_placeholder_element;
-function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_ , depict_api_: depict_api_ , all_products_loaded_: all_products_loaded_ , min_products_to_fetch_: min_products_to_fetch_ , query_base_: query_base_ , first_result_in_viewport_: first_result_in_viewport_ , last_result_in_viewport_: last_result_in_viewport_ , scroll_restoration_data_: scroll_restoration_data_ , no_results_options_: no_results_options_ , desktop_filter_elements_: desktop_filter_elements_ , sort_or_filter_open_: sort_or_filter_open_ , rr_options_: rr_options_ , layout_options_: layout_options_ , tenant_object_: tenant_object_ , type_for_tracking_: type_for_tracking_ , id_currently_querying_for_: id_currently_querying_for_  }) {
-    // The plp_results_ resource will be delayed because we're using createBatchedMemo to not make triplicate API requests, but we need to show the placeholders before already to match Chrome and Firefox's "content has to be there, ready for scroll restoration, before all popstate tasks have been completed"-requirement
-    const is_loading = (0, $46MJV$solidjs.createMemo)(()=>plp_results_.loading || query_base_.loading);
-    const cleanup_old_cards = [];
-    const render_and_insert_results = (0, $46MJV$depictaiutilishared.deparallelize_no_drop)(async (insert_into, owner)=>{
-        const fallback_to_no_results = ()=>(0, $46MJV$solidjs.runWithOwner)(owner, ()=>insert_into.replaceChildren(...(0, $2b4e3538e183d885$export$ef6006467f04ee41)(no_results_options_)));
-        const observe_for_counting_ = (0, $46MJV$solidjs.runWithOwner)(owner, ()=>(0, $1089684cb32bf922$export$daf1a0aef2143a61)({
-                last_result_in_viewport_: last_result_in_viewport_,
-                first_result_in_viewport_: first_result_in_viewport_
-            }));
-        const current_results = (0, $46MJV$solidjs.untrack)(plp_results_);
-        const current_cursor = current_results.cursor;
-        const load_more_post_processor = current_cursor // if we already got everything, don't make actual load more post processor.
-         ? (0, $6154d0a3d9e9b16e$export$36aef51ac7a64eae)({
-            depict_api_: depict_api_,
-            min_products_to_fetch_: min_products_to_fetch_,
-            all_products_loaded_: all_products_loaded_,
-            query_base_: query_base_,
-            observe_for_counting_: observe_for_counting_,
-            start_cursor_: current_cursor
-        }) : function(items) {
-            observe_for_counting_(items);
-            return items;
-        };
-        // create owner to run product cards with an Owner, so they know when they've gotten removed
-        const [owner_for_cards, dispose_our_cards] = (0, $46MJV$solidjs.createRoot)((dispose)=>[
-                (0, $46MJV$solidjs.getOwner)(),
-                dispose
+
+
+function $f93412cebc8f7bac$export$2f0cbfbb4354bb52(elements) {
+    // FYI this probably doesn't work on hugely deep nestings or large amount of elements
+    return (0, $46MJV$solidjs.createMemo)(()=>$f93412cebc8f7bac$var$unwrapping_helper(elements));
+}
+function $f93412cebc8f7bac$var$unwrapping_helper(elements) {
+    const result = [];
+    if (Array.isArray(elements)) for(let i = 0; i < elements.length; i++){
+        const element = elements[i];
+        result.push(...$f93412cebc8f7bac$var$unwrapping_helper(element));
+    }
+    else if (typeof elements == "function") result.push(...$f93412cebc8f7bac$var$unwrapping_helper(elements()));
+    else if (elements != undefined && typeof elements != "boolean") result.push(elements);
+    return result;
+}
+
+
+let $7b0b7e887b485a91$var$cached_placeholder_element;
+let $7b0b7e887b485a91$var$rendering_cached_placeholder_element;
+function $7b0b7e887b485a91$export$f33414a4df0afd3f({ product_card_template_: product_card_template_ , num_placeholders_: num_placeholders_  }) {
+    const [get_elements, set_elements] = (0, $46MJV$solidjs.createSignal)([]);
+    let existing_num = 0;
+    (0, $46MJV$solidjs.createRenderEffect)(()=>{
+        const to_add = num_placeholders_() - existing_num;
+        if (to_add <= 0) return;
+        // Below comment is from when we used recommendation renderer and manual DOM manipulation for this, but I'm still scared to remove placeholders and mess up scroll restoration, so I'm keeping the way it worked. Otherwise, <Index> could be used which would be far more elegant.
+        // We don't need to remove placeholders, only need to add. The reason for that is that chrome restores the scroll position once all tasks queued as reaction of the "popstate" events have been completed in the task queue. That means that we need to get the placeholders in fast, or we might lose scroll position if the previous site was shorter.
+        // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyway but THIS WORKS, and I've been working on this bug for 3 hours so let's just keep it this way.
+        set_elements((prev)=>[
+                ...prev,
+                ...Array.from({
+                    length: to_add
+                }).map(()=>$7b0b7e887b485a91$var$Placeholder({
+                        product_card_template_: product_card_template_
+                    }))
             ]);
-        const rendering_result = await (0, $46MJV$depictaiutilishared.default_rr)(tenant_object_, {
-            type: type_for_tracking_,
-            recs: current_results.displays,
-            ...rr_options_,
-            ...typeof rr_options_.template === "function" ? {
-                template: $8d94abc871e13baf$var$wrap_template_to_throw_into_error_boundary(rr_options_.template, owner_for_cards)
-            } : {},
-            post_processors: [
-                ...rr_options_.post_processors || [],
-                load_more_post_processor
-            ]
+        existing_num += to_add;
+    });
+    return get_elements; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+}
+/**
+ * Get one placeholder element. It will be cloned for each placeholder for ultimate performance even when solid-js isn't rendering the placeholders.
+ */ function $7b0b7e887b485a91$var$Placeholder({ product_card_template_: product_card_template_  }) {
+    const get_cloned_placeholders = (element_to_clone = $7b0b7e887b485a91$var$cached_placeholder_element)=>Array.isArray(element_to_clone) ? element_to_clone.map((el)=>el instanceof Node ? el.cloneNode(true) : el) : element_to_clone;
+    if ($7b0b7e887b485a91$var$cached_placeholder_element) return get_cloned_placeholders();
+    let dispose_original_copy;
+    const get_unwrapped_element = (0, $46MJV$solidjs.createRoot)((dispose)=>{
+        dispose_original_copy = dispose;
+        // if product_card_template_ is async and rejects the resource will take care of throwing upwards here in the solid-js error handling system
+        const [resource] = (0, $46MJV$solidjs.createResource)(()=>{
+            if ($7b0b7e887b485a91$var$rendering_cached_placeholder_element) return $7b0b7e887b485a91$var$rendering_cached_placeholder_element;
+            const return_value = product_card_template_(null, undefined);
+            if (typeof return_value === "object" && typeof return_value?.then === "function") // Is Promise or promise-like object
+            $7b0b7e887b485a91$var$rendering_cached_placeholder_element = return_value;
+            return return_value;
         });
-        // check if we still should insert or something new happened while we were rendering
-        if ((0, $46MJV$solidjs.untrack)(has_no_results_or_failed) || (0, $46MJV$solidjs.untrack)(is_loading)) {
-            (0, $46MJV$depictaiutilishared.dlog)("PLPResults: Not inserting rendered results because we became loading or switched to no results");
-            return;
-        }
-        const { elements: elements , should_stay_inserted: should_stay_inserted  } = rendering_result;
-        if (!elements) {
-            fallback_to_no_results(); // rendering failed at this point but just pretend it's no results
+        return (0, $46MJV$solidjs.createMemo)(()=>{
+            if (resource.loading) return ()=>[];
+            return (0, $f93412cebc8f7bac$export$2f0cbfbb4354bb52)(resource);
+        });
+    });
+    (0, $46MJV$solidjs.onCleanup)(()=>{
+        if ($7b0b7e887b485a91$var$rendering_cached_placeholder_element) {
+            // If we're still rendering in our separate root, let the rendering finish or other <Placeholder> components waiting for it might get an incomplete result
+            const unset_current_rendering = ()=>{
+                dispose_original_copy();
+                $7b0b7e887b485a91$var$rendering_cached_placeholder_element = undefined;
+            };
+            $7b0b7e887b485a91$var$rendering_cached_placeholder_element?.then(unset_current_rendering, unset_current_rendering);
+        } else // Otherwise, just make sure we've disposed our root
+        dispose_original_copy();
+    });
+    return (0, $46MJV$solidjs.createMemo)(()=>{
+        const unwrapped_array = get_unwrapped_element()();
+        if (!unwrapped_array?.length || !unwrapped_array.every((item)=>item)) // Haven't finished rendering yet in case of "async" rendering, so don't freeze the elements yet
+        return;
+        // placeholders have finished rendering, freeze the elements
+        $7b0b7e887b485a91$var$cached_placeholder_element = get_cloned_placeholders(unwrapped_array); // Clone initial return value so that who gave us the elements can't mutate them, which has caused issues before with react
+        $7b0b7e887b485a91$var$rendering_cached_placeholder_element = undefined;
+        dispose_original_copy(); // So that this memo will never re-run and the placeholder rendering function can clean up
+        return get_cloned_placeholders(); // clone, just in case. If we wouldn't, someone could modify the copy in the DOM, and it would affect the cached version
+    });
+}
+
+
+/*
+ * Usually product templates are somewhat height-elastic depending on the content, i.e. if the title is longer we might up to two extra rows for this. That means that the placeholders almost never will reflect the size of the actual content when we do scroll restoration. This magic number specifies how many extra placeholders we should render everytime to compensate for this, since if the placeholders are in total shorter than the old scroll location the scroll restoration won't work.
+ */ const $39d15a684cb3e309$export$6c9030e511152266 = 30;
+
+
+/** @jsxImportSource solid-js */ 
+
+
+
+function $20717024e763c0fa$export$5e4aed86c12acdd9({ percentage_in_view_: percentage_in_view_ , set_extra_displays_: set_extra_displays_ , all_products_loaded_: all_products_loaded_ , plp_results_: plp_results_ , min_products_to_fetch_: min_products_to_fetch_ , query_base_: query_base_ , depict_api_: depict_api_  }) {
+    let last_loaded = +new Date();
+    let is_loading_more = false;
+    let is_first_load = true;
+    const [get_last_cursor, set_last_cursor] = (0, $46MJV$solidjs.createSignal)();
+    (0, $46MJV$solidjs.createComputed)((0, $46MJV$solidjs.on)(plp_results_, ()=>set_extra_displays_([]), {
+        defer: true
+    })); // empty array when a new request has completed (don't run this initially since it will already be empty)
+    (0, $46MJV$solidjs.createComputed)(()=>{
+        set_last_cursor(plp_results_()?.cursor);
+        last_loaded = +new Date();
+        is_first_load = true;
+    });
+    (0, $46MJV$solidjs.createEffect)((0, $46MJV$depictaiutilishared.catchify)(async ()=>{
+        const be_above_percentage = is_first_load ? 50 : 75; // if first load, load earlier
+        if (percentage_in_view_() < be_above_percentage || is_loading_more) return;
+        if (!get_last_cursor()) {
+            // dlog("All results loaded, can't load more");
+            all_products_loaded_?.[1](true); // This is unset in SearchPage as we start fetching new results
             return;
         }
-        insert_into.replaceChildren(...elements);
-        // Dispose the old cards just after the cards have been removed from the DOM
-        cleanup_old_cards.forEach((cleanup_function)=>cleanup_function());
-        cleanup_old_cards.push(dispose_our_cards); // push after calling, so that we don't instantly demolish ourselves lol
-        should_stay_inserted?.then((should)=>{
-            // If we shouldn't stay inserted for some reason, switch back to no results
-            if (!should) fallback_to_no_results();
+        // dlog("More than ", be_above_percentage, "% in view, ", percentage_in_view_(), "%, loading more");
+        is_loading_more = true;
+        const base_part = (0, $46MJV$solidjs.untrack)(query_base_);
+        const now = +new Date();
+        // load faster if someone is scrolling aggressively
+        const number_of_results_to_load = is_first_load ? // After first load, always just load 20 since people might just be browsing the top ones still
+        min_products_to_fetch_ : now - last_loaded < 10000 ? min_products_to_fetch_ * 5 : min_products_to_fetch_;
+        // dlog("loading ", number_of_results_to_load, "products, because it was", now - last_loaded, "ms since last load");
+        const api_response = await depict_api_["query_id" in base_part ? "list" : "query"]({
+            cursor: get_last_cursor(),
+            limit: number_of_results_to_load,
+            ...base_part
         });
+        const new_displays = api_response?.displays || [];
+        set_extra_displays_((old_value)=>{
+            // We want this to go fast. The apply method is the fastest way to add to an array, and AFAIK it's faster to add than to create a new one.
+            // eslint-disable-next-line prefer-spread
+            old_value.push.apply(old_value, new_displays);
+            return old_value;
+        });
+        set_last_cursor(api_response.cursor);
+        is_loading_more = false;
+        last_loaded = +new Date();
+        is_first_load = false;
+    }));
+}
+
+
+
+function $ef82a1d4fac1efad$export$63dd0350f8559dda({ displays_by_key_: displays_by_key_ , get_last_result_in_viewport_: get_last_result_in_viewport_ , index_to_target_map_: index_to_target_map_ , is_loading_: is_loading_ , get_extra_displays: get_extra_displays  }) {
+    const [get_has_rendered_toggle, set_has_rendered_toggle] = (0, $46MJV$solidjs.createSignal)(false);
+    (0, $46MJV$solidjs.createEffect)(()=>{
+        // We need this to run after the "render phase"
+        get_extra_displays();
+        set_has_rendered_toggle((old)=>!old);
     });
+    return (0, $46MJV$solidjs.createMemo)(()=>{
+        const last = get_last_result_in_viewport_();
+        // Check if we are past the last result, in that case we want it to count as 100% for a better infinite scroll experience
+        past_last_result_check: {
+            const elements_of_last_result = index_to_target_map_.get(index_to_target_map_.size - 1);
+            if (elements_of_last_result) {
+                if ((0, $46MJV$solidjs.untrack)(is_loading_)) {
+                    // We're loading, wait check again after we have inserted our new results
+                    get_has_rendered_toggle();
+                    break past_last_result_check;
+                }
+                for (const element of elements_of_last_result){
+                    if (document.documentElement.contains(element) && element.getBoundingClientRect().top <= 0) // dlog(element, "which is of last product card is in or above viewport, probably loading more");
+                    return 100;
+                }
+            }
+        }
+        if (isNaN(last)) return 0;
+        if (Math.abs(last) === Infinity) // No product card in view and not after last card, assume first card
+        return 0;
+        return last / displays_by_key_().size * 100;
+    });
+}
+
+
+
+
+/**
+ * Gets product_id (the thing we key the rendering on) from a display
+ */ function $f1ea6fcde8fab269$export$548d053aba053d79(display) {
+    if ("variant_index" in display) {
+        const actual_display = display.variant_displays[display.variant_index];
+        return actual_display.product_id;
+    }
+    return display.product_id;
+}
+
+
+
+function $ea6c1dd5af2900d8$export$7f8bd308237ab5a5(get_displays_) {
+    const displays_by_key_ = (0, $46MJV$solidjs.createMemo)(()=>{
+        const displays = get_displays_();
+        // We key by product_id because that's what can be used to uniquely identify products
+        // This way <For> can optimize the rendering
+        const map = new Map();
+        for(let i = 0; i < displays.length; i++){
+            const display = displays[i];
+            const product_id = (0, $f1ea6fcde8fab269$export$548d053aba053d79)(display);
+            map.set(product_id, display);
+        }
+        return map;
+    });
+    return displays_by_key_;
+}
+function $ea6c1dd5af2900d8$export$43f0fb951fcb0c54({ displays_by_key_: displays_by_key_ , merchant_: merchant_ , market_: market_ , product_card_template_: product_card_template_ , do_per_elements_: do_per_elements_  }) {
+    return (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.For), {
+        get each () {
+            return [
+                ...displays_by_key_().keys()
+            ];
+        },
+        children: (product_id, index)=>{
+            // We're using `untrack` here since we don't want to react in here to displays_by_key changing
+            // As long as our key stays the same we assume that the display hasn't changed, so we don't want to rerender
+            // If the key gets removed, <For> will remove us
+            const owner = (0, $46MJV$solidjs.getOwner)();
+            const display_accessor = (0, $46MJV$solidjs.createMemo)(()=>displays_by_key_().get(product_id));
+            const [product_card_resource] = (0, $46MJV$solidjs.createResource)((0, $46MJV$solidjs.createMemo)(()=>[
+                    merchant_(),
+                    market_()
+                ]), // re-render when merchant or market changes
+            ([merchant, market])=>{
+                // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+                const display = (0, $46MJV$solidjs.untrack)(display_accessor);
+                return product_card_template_(display, {
+                    set_on_index_change: (fn)=>(0, $46MJV$solidjs.runWithOwner)(owner, ()=>(0, $46MJV$solidjs.createEffect)(()=>fn(index()))),
+                    merchant: merchant,
+                    market: market
+                });
+            });
+            const node_accessor = (0, $f93412cebc8f7bac$export$2f0cbfbb4354bb52)(product_card_resource);
+            (0, $46MJV$solidjs.createEffect)(()=>{
+                const product_card_nodes = node_accessor();
+                const display = display_accessor();
+                const elements = [];
+                for(let i = 0; i < product_card_nodes.length; i++){
+                    const element = product_card_nodes[i];
+                    if (!(element instanceof Element)) continue;
+                    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;
+                }
+                do_per_elements_?.(elements, index);
+            });
+            return product_card_resource; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+        }
+    });
+}
+
+
+function $f67fba44c7515f35$export$a1fd619a4743ca08({ plp_results_: plp_results_ , product_card_template_: product_card_template_ , first_result_in_viewport_: [, set_first_result_in_viewport] , last_result_in_viewport_: [get_last_result_in_viewport_, set_last_result_in_viewport] , merchant_: merchant_ , market_: market_ , 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_  }) {
+    // The following sets up an intersection observer to determine which results are in the viewport, used for the ScrollStatus indicator and knowing when to load more
+    const target_to_index_map = new Map();
+    const index_to_target_map_ = new Map();
+    const currently_intersecting = new Set();
+    const intersection_observer = new IntersectionObserver((0, $46MJV$depictaiutilishared.catchify)((records)=>{
+        for(let i = 0; i < records.length; i++){
+            const record = records[i];
+            const { target: target , intersectionRatio: intersectionRatio  } = record;
+            const index_of_target = target_to_index_map.get(target);
+            const is_in_set = currently_intersecting.has(index_of_target);
+            if (intersectionRatio > 0) {
+                if (!is_in_set) currently_intersecting.add(index_of_target);
+            } else if (is_in_set) currently_intersecting.delete(index_of_target);
+        }
+        set_first_result_in_viewport(Math.min(...currently_intersecting) + 1); // +1 because we want to start counting at 1
+        set_last_result_in_viewport(Math.max(...currently_intersecting) + 1);
+    }, "PLPResults IO failed"));
+    // Although typing doesn't reflect it, plp_results is guaranteed to contain an array of at least one display at this point
+    const [get_extra_displays, set_extra_displays_] = (0, $46MJV$solidjs.createSignal)([], {
+        equals: false
+    });
+    const displays_by_key_ = (0, $ea6c1dd5af2900d8$export$7f8bd308237ab5a5)((0, $46MJV$solidjs.createMemo)(()=>[
+            ...plp_results_().displays,
+            ...get_extra_displays()
+        ]));
+    const percentage_in_view_ = (0, $ef82a1d4fac1efad$export$63dd0350f8559dda)({
+        get_last_result_in_viewport_: get_last_result_in_viewport_,
+        displays_by_key_: displays_by_key_,
+        index_to_target_map_: index_to_target_map_,
+        is_loading_: is_loading_,
+        get_extra_displays: get_extra_displays
+    });
+    (0, $20717024e763c0fa$export$5e4aed86c12acdd9)({
+        percentage_in_view_: percentage_in_view_,
+        set_extra_displays_: set_extra_displays_,
+        all_products_loaded_: all_products_loaded_,
+        plp_results_: plp_results_,
+        min_products_to_fetch_: min_products_to_fetch_,
+        query_base_: query_base_,
+        depict_api_: depict_api_
+    });
+    return (0, $ea6c1dd5af2900d8$export$43f0fb951fcb0c54)({
+        displays_by_key_: displays_by_key_,
+        merchant_: merchant_,
+        market_: market_,
+        product_card_template_: product_card_template_,
+        do_per_elements_: (elements, index_accessor)=>// Adds/removes elements from the "results in viewport" intersection observer above
+            (0, $46MJV$solidjs.createEffect)(()=>{
+                const display_index = index_accessor();
+                // Nested createEffect because we only want to re-run this when the index changes
+                // We need to save in a map which index the elements of this template are so that we can know that in the IntersectionObserver callback
+                for(let i = 0; i < elements.length; i++){
+                    const element = elements[i];
+                    target_to_index_map.set(element, display_index);
+                    intersection_observer.observe(element);
+                    (0, $46MJV$solidjs.onCleanup)(()=>{
+                        intersection_observer.unobserve(element);
+                        target_to_index_map.delete(element);
+                        currently_intersecting.delete(display_index);
+                    });
+                }
+                index_to_target_map_.set(display_index, elements);
+                (0, $46MJV$solidjs.onCleanup)(()=>index_to_target_map_.delete(display_index));
+            })
+    });
+}
+
+
+const $8d94abc871e13baf$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="PLP-results"></div>`, 2), $8d94abc871e13baf$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="cards"></div>`, 2), $8d94abc871e13baf$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<style></style>`, 2);
+function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_ , depict_api_: depict_api_ , all_products_loaded_: all_products_loaded_ , min_products_to_fetch_: min_products_to_fetch_ , query_base_: query_base_ , first_result_in_viewport_: first_result_in_viewport_ , last_result_in_viewport_: last_result_in_viewport_ , scroll_restoration_data_: [get_scroll_restoration_data] , no_results_options_: no_results_options_ , desktop_filter_elements_: desktop_filter_elements_ , sort_or_filter_open_: sort_or_filter_open_ , product_card_template_: product_card_template_ , layout_options_: layout_options_ , id_currently_querying_for_: id_currently_querying_for_  }) {
+    // The plp_results_ resource will be delayed because we're using createBatchedMemo to not make triplicate API requests, but we need to show the placeholders before already to match Chrome and Firefox's "content has to be there, ready for scroll restoration, before all popstate tasks have been completed"-requirement
+    const is_loading_ = (0, $46MJV$solidjs.createMemo)(()=>plp_results_.loading || query_base_.loading);
+    const merchant_ = (0, $46MJV$solidjs.createMemo)(()=>query_base_().tenant);
+    const market_ = (0, $46MJV$solidjs.createMemo)(()=>query_base_().market);
     const has_no_results_or_failed = (0, $46MJV$solidjs.createMemo)(()=>{
         const displays = plp_results_()?.displays;
-        return !is_loading() && (!Array.isArray(displays) || !displays.length);
+        return !is_loading_() && (!Array.isArray(displays) || !displays.length);
     });
-    if (all_products_loaded_) (0, $46MJV$solidjs.createComputed)(()=>{
+    if (all_products_loaded_) // This is for the case that all products were loaded in the first result I think?
+    (0, $46MJV$solidjs.createComputed)(()=>{
         const is_at_end = !plp_results_()?.cursor; // or failed, but we don't wanna / it's not easy to retry
-        if (!is_loading() && is_at_end) all_products_loaded_[1](true);
+        if (!is_loading_() && is_at_end) all_products_loaded_[1](true);
     });
-    (0, $46MJV$solidjs.onCleanup)(()=>cleanup_old_cards.forEach((fn)=>fn())); // if everything gets cleaned up without new cards replacing the old ones, clean up the last cards
     return (()=>{
         const _el$ = $8d94abc871e13baf$var$_tmpl$.cloneNode(true);
         (0, $46MJV$solidjsweb.insert)(_el$, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Show), {
@@ -969,7 +1106,7 @@ function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_
                 return (0, $0f2f58dd60b11888$export$b69d0d92862de18b)({
                     severity_: "error",
                     // More granular error handling
-                    // This _also_ fails when a product card rendering fails due to the runWithOwner with a root that was created inside the "root"/"context" of this ErrorBoundary
+                    // This _also_ fails when a product card rendering fails
                     on_error_: (retry)=>{
                         // re-try / reset ErrorBoundary next time we're getting product cards
                         const track = (0, $46MJV$solidjs.createReaction)(retry);
@@ -981,83 +1118,108 @@ function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_
                     // So that the styling looks pretty when we've failed
                     message_: "Result rendering failed",
                     get children () {
+                        let suspense_contents;
+                        let is_just_after_plp_results_update = false;
+                        let fallback_is_alive = false;
                         const random_id = (0, $46MJV$depictaiutilishared.make_random_classname)();
-                        const selector_beginning = `.depict.plp #${random_id}>`;
-                        const cards = (()=>{
-                            const _el$2 = $8d94abc871e13baf$var$_tmpl$2.cloneNode(true);
-                            (0, $46MJV$solidjsweb.setAttribute)(_el$2, "id", random_id);
-                            return _el$2;
-                        })();
-                        const style = document.createElement("style");
-                        (0, $46MJV$solidjs.createRenderEffect)(()=>{
-                            // Add grid styling that changes when filters get opened/closed
-                            const when_filters_closed_cols = layout_options_.cols_at_size;
-                            const cols_at_size = sort_or_filter_open_() ? when_filters_closed_cols.map((row)=>{
-                                const [num_cols_default, , , , override_cols] = row;
-                                const cloned_row = [
-                                    ...row
-                                ];
-                                // @ts-ignore
-                                cloned_row[0] = num_cols_default - 1;
-                                if (override_cols) // @ts-ignore
-                                cloned_row[4] = {
-                                    overrides: Object.fromEntries(Object.entries(override_cols.overrides).map(([row, column])=>[
-                                            row,
-                                            column - 1
-                                        ]))
-                                };
-                                return cloned_row;
-                            }) : when_filters_closed_cols;
-                            const css = (0, $46MJV$depictaiutilishared.n_col_styling_with_dist)(selector_beginning, layout_options_.grid_spacing, cols_at_size, "grid", layout_options_.override_vertical_spacing);
-                            style.replaceChildren(css);
+                        const selector_beginning_ = `.depict.plp #${random_id}>`;
+                        const [get_styling, set_styling_] = (0, $46MJV$solidjs.createSignal)("");
+                        const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = (0, $46MJV$solidjs.createSignal)(false);
+                        const rendered_placeholders = (0, $46MJV$solidjs.createMemo)(()=>get_should_have_placeholders_rendered() ? (0, $7b0b7e887b485a91$export$f33414a4df0afd3f)({
+                                product_card_template_: product_card_template_,
+                                num_placeholders_: (0, $46MJV$solidjs.createMemo)(()=>{
+                                    // Can't use the data out of request_base for the id because request_base is too late, we need the correct amount of placeholders before the browser has restored the scroll state after processing all popstate events
+                                    return (0, $39d15a684cb3e309$export$6c9030e511152266) + (get_scroll_restoration_data().find(({ for_id: for_id  })=>for_id === id_currently_querying_for_())?.min_results_loaded ?? min_products_to_fetch_);
+                                })
+                            }) : undefined);
+                        const [get_suspense_is_blocked, set_suspense_is_blocked] = (0, $46MJV$solidjs.createSignal)(false);
+                        (0, $46MJV$solidjs.createComputed)(()=>{
+                            if (!is_loading_()) return;
+                            set_should_have_placeholders_rendered(true);
+                            set_suspense_is_blocked(false);
+                            is_just_after_plp_results_update = true;
                         });
-                        (0, $46MJV$solidjs.createRenderEffect)(// render placeholders / product cards
-                        (0, $46MJV$depictaiutilishared.catchify)(async ()=>{
-                            const owner_ = (0, $46MJV$solidjs.getOwner)();
-                            if (is_loading()) await $8d94abc871e13baf$var$insert_placeholders({
-                                scroll_restoration_data_: scroll_restoration_data_,
-                                id_currently_querying_for_: id_currently_querying_for_,
-                                rr_options_: rr_options_,
-                                tenant_object_: tenant_object_,
-                                min_products_to_fetch_: min_products_to_fetch_,
-                                owner_: owner_,
-                                cards_element_: cards
-                            });
-                            else if (!has_no_results_or_failed()) {
-                                plp_results_(); // re-run render_and_insert_results when results change
-                                render_and_insert_results(cards, owner_);
-                            }
-                        }));
-                        // copied from RecommendationGrid
-                        // convoluted lazy loading that
-                        // when the elements are in the DOM starts IntersectionObserver on whole grid
-                        // when grid intersects starts Lazyfier
-                        // this is because Lazyfier is fucking stupid
-                        (0, $46MJV$depictaiutilishared.observer).wait_for_element(cards).then((0, $46MJV$depictaiutilishared.catchify)((element)=>{
-                            let start_lazy_loading;
-                            const lazy_loading_promise = new Promise((r)=>start_lazy_loading = r);
-                            const lf = new (0, $46MJV$depictaiutilishared.Lazyfier)({
-                                only_load_intersecting: true,
-                                wait_for_dominsertion: lazy_loading_promise,
-                                ignore_data_urls: true,
-                                lazyfinder: {
-                                    unload () {}
-                                }
-                            });
-                            lf.start_observing_for_new_children_(element);
-                            const i_o = new IntersectionObserver((0, $46MJV$depictaiutilishared.catchify)((records)=>{
-                                for (const record of records)if (record.intersectionRatio > 0) {
-                                    start_lazy_loading();
-                                    i_o.disconnect();
-                                    return;
+                        $8d94abc871e13baf$var$results_grid_styling_generator({
+                            layout_options_: layout_options_,
+                            set_styling_: set_styling_,
+                            sort_or_filter_open_: sort_or_filter_open_,
+                            selector_beginning_: selector_beginning_
+                        });
+                        const has_at_least_one_display = (0, $46MJV$solidjs.createMemo)(()=>!!plp_results_()?.displays?.length); // Only de-construct below stuff if we get 0 displays. Important that this returns boolean so that below Suspense only gets re-created if it actually changes
+                        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);
+                        };
+                        const non_placeholder_product_cards = (0, $46MJV$solidjs.createMemo)(()=>has_at_least_one_display() && // 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)
+                            (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Suspense), {
+                                get fallback () {
+                                    return (()=>{
+                                        fallback_is_alive = true;
+                                        (0, $46MJV$solidjs.onCleanup)(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
+                                        return (0, $46MJV$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
+                                            if (get_suspense_is_blocked()) return suspense_contents;
+                                            set_should_have_placeholders_rendered(true); // just in case
+                                            (0, $46MJV$solidjs.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 = (0, $f67fba44c7515f35$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_
+                                        });
+                                        (0, $46MJV$solidjs.onCleanup)(()=>suspense_contents = undefined);
+                                        return suspense_contents;
+                                    })();
                                 }
                             }));
-                            i_o.observe(cards);
+                        (0, $46MJV$solidjs.createEffect)((0, $46MJV$solidjs.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 block the suspense. Therefore, we're just doing it with this effect
+                            block_suspense_if_needed();
+                        }, {
+                            defer: true
                         }));
                         return [
-                            (0, $8e863dc22b06b688$export$a2cc176055f8f08)(),
-                            cards,
-                            style
+                            (0, $46MJV$solidjsweb.memo)((0, $8e863dc22b06b688$export$a2cc176055f8f08)),
+                            (()=>{
+                                const _el$2 = $8d94abc871e13baf$var$_tmpl$2.cloneNode(true);
+                                (0, $46MJV$solidjsweb.setAttribute)(_el$2, "id", random_id);
+                                (0, $46MJV$solidjsweb.insert)(_el$2, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Show), {
+                                    get when () {
+                                        return !is_loading_();
+                                    },
+                                    get fallback () {
+                                        return rendered_placeholders();
+                                    },
+                                    get children () {
+                                        return non_placeholder_product_cards();
+                                    }
+                                }));
+                                return _el$2;
+                            })(),
+                            (()=>{
+                                const _el$3 = $8d94abc871e13baf$var$_tmpl$3.cloneNode(true);
+                                (0, $46MJV$solidjsweb.insert)(_el$3, get_styling);
+                                return _el$3;
+                            })()
                         ];
                     }
                 });
@@ -1068,63 +1230,32 @@ function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_
         return _el$;
     })();
 }
-async function $8d94abc871e13baf$var$insert_placeholders({ scroll_restoration_data_: [get_scroll_restoration_data] , min_products_to_fetch_: min_products_to_fetch_ , tenant_object_: tenant_object_ , rr_options_: rr_options_ , owner_: owner_ , cards_element_: cards_element_ , id_currently_querying_for_: id_currently_querying_for_  }) {
-    const num_placeholders = // we don't need runWithOwner here because we haven't had an await yet, so we haven't lost the owner
-    (0, $46MJV$solidjs.createMemo)(()=>{
-        // Can't use the data out of request_base for the id because request_base is too late, we need the correct amount of placeholders before the browser has restored the scroll state after processing all popstate events
-        return (0, $39d15a684cb3e309$export$6c9030e511152266) + (get_scroll_restoration_data().find(({ for_id: for_id  })=>for_id === id_currently_querying_for_())?.min_results_loaded ?? min_products_to_fetch_);
+/**
+ * Sets styling to styling generated by "Layout" (n_col_styling_with_dist) depending on if filters are open or not
+ * This function is special to the actual PLPResults.
+ */ function $8d94abc871e13baf$var$results_grid_styling_generator({ layout_options_: layout_options_ , sort_or_filter_open_: sort_or_filter_open_ , set_styling_: set_styling_ , selector_beginning_: selector_beginning_  }) {
+    (0, $46MJV$solidjs.createRenderEffect)(()=>{
+        // Add grid styling that changes when filters get opened/closed
+        const when_filters_closed_cols = layout_options_.cols_at_size;
+        const cols_at_size = sort_or_filter_open_() ? when_filters_closed_cols.map((row)=>{
+            const [num_cols_default, , , , override_cols] = row;
+            const cloned_row = [
+                ...row
+            ];
+            // @ts-ignore
+            cloned_row[0] = num_cols_default - 1;
+            if (override_cols) // @ts-ignore
+            cloned_row[4] = {
+                overrides: Object.fromEntries(Object.entries(override_cols.overrides).map(([row, column])=>[
+                        row,
+                        column - 1
+                    ]))
+            };
+            return cloned_row;
+        }) : when_filters_closed_cols;
+        const css = (0, $46MJV$depictaiutilishared.n_col_styling_with_dist)(selector_beginning_, layout_options_.grid_spacing, cols_at_size, "grid", layout_options_.override_vertical_spacing);
+        set_styling_(css);
     });
-    let existing_num = 0;
-    let removed_old_children = false;
-    if (!$8d94abc871e13baf$var$cached_placeholder_element) {
-        const [dispose_card, root_in_root] = (0, $46MJV$solidjs.createRoot)((dispose)=>[
-                dispose,
-                (0, $46MJV$solidjs.getOwner)()
-            ]);
-        const { elements: elements  } = await (0, $46MJV$depictaiutilishared.default_rr)(tenant_object_, {
-            ...rr_options_,
-            type: "placeholder",
-            pre_processors: [],
-            post_processors: [],
-            ...typeof rr_options_.template === "function" ? {
-                template: $8d94abc871e13baf$var$wrap_template_to_throw_into_error_boundary(rr_options_.template, root_in_root, ()=>(0, $46MJV$depictaiutilishared.queueMacroTask)((0, $46MJV$depictaiutilishared.catchify)(dispose_card)) // we just want it cloned and dead
-                )
-            } : {},
-            recs: [
-                {
-                    page_url: "javascript:void(0)"
-                }
-            ] // This later gets ignored and turned into `null` by the SDK functions in the @depict-ai/ui package
-        });
-        const element = elements?.find((e)=>e instanceof HTMLElement || e instanceof SVGElement);
-        if (!element) return [];
-        $8d94abc871e13baf$var$cached_placeholder_element = element.cloneNode(true); // don't save the actual element, clone it directly so that the who provided it can't modify it later (this has caused a bug before with react)
-    }
-    (0, $46MJV$solidjs.runWithOwner)(owner_, ()=>(0, $46MJV$solidjs.createRenderEffect)(()=>{
-            const to_add = num_placeholders() - existing_num;
-            if (to_add <= 0) return;
-            // We don't need to remove placeholders, only need to add. The reason for that is that chrome restores the scroll position once all tasks queued as reaction of the "popstate" events have been completed in the task queue. That means that we need to get the placeholders in fast, or we might lose scroll position if the previous site was shorter.
-            // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyway but THIS WORKS, and I've been working on this bug for 3 hours so let's just keep it this way.
-            cards_element_[removed_old_children ? "append" : (removed_old_children = true, "replaceChildren")](...Array.from({
-                length: to_add
-            }).map(()=>$8d94abc871e13baf$var$cached_placeholder_element.cloneNode(true)));
-            existing_num += to_add;
-        }));
-}
-function $8d94abc871e13baf$var$wrap_template_to_throw_into_error_boundary(template, root_in_root, on_finally) {
-    return async (...args)=>{
-        try {
-            return await (0, $46MJV$solidjs.runWithOwner)(root_in_root, ()=>template(...args)) || [];
-        } catch (e) {
-            (0, $46MJV$solidjs.runWithOwner)(root_in_root, ()=>{
-                // Throw in case of promise rejection, ultimately into ErrorBoundary
-                throw e;
-            });
-            return [];
-        } finally{
-            on_finally?.();
-        }
-    };
 }
 
 
@@ -1713,7 +1844,7 @@ function $76bb4acbbb94c2c6$export$ca21a16d65b3dd8({ show_extras_: [get_show_extr
 const $8984a0a949b1c852$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<form class="checkboxes"></form>`, 2);
 const $8984a0a949b1c852$var$max_visible_without_collapsing = 7;
 const $8984a0a949b1c852$var$show_non_collapsible_when_collapsed = 4;
-function $8984a0a949b1c852$export$dd948f91abc3a1c4({ filter_: filter_ , selected_filters_: [get_selected_filters, set_selected_filters] , i18n_: i18n_ , view_more_button_below_group_: [_get_view_more_button_below_group_, set_view_more_button_below_group_]  }) {
+function $8984a0a949b1c852$export$dd948f91abc3a1c4({ filter_: filter_ , selected_filters_: [get_selected_filters, set_selected_filters] , i18n_: i18n_ , view_more_button_below_group_: [, set_view_more_button_below_group_]  }) {
     const existing_filter = (0, $46MJV$solidjs.createMemo)(()=>{
         const { field: field , op: op  } = filter_();
         return get_selected_filters().find(({ field: checking_field , op: checking_op  })=>checking_field === field && checking_op === op);
@@ -1794,7 +1925,7 @@ function $8984a0a949b1c852$export$dd948f91abc3a1c4({ filter_: filter_ , selected
                 ...base_object,
                 data: [
                     ...new FormData(form)
-                ].filter(([_key, value])=>value === "on").map(([key])=>key)
+                ].filter(([, value])=>value === "on").map(([key])=>key)
             };
             const selected_filters = [
                 ...get_selected_filters()
@@ -4028,7 +4159,10 @@ function $881cb1745bafff7a$var$OpenSortingButton({ i18n_: i18n_ , get_current_so
         (0, $46MJV$solidjsweb.setAttribute)(_el$12, "tabindex", tabindex_);
         (0, $46MJV$solidjsweb.insert)(_el$13, (()=>{
             const _c$ = (0, $46MJV$solidjsweb.memo)(()=>!!sorting_closed());
-            return ()=>_c$() && (meta_of_currently_selected_sorting_()?.title || available_sortings_()?.[0]?.meta?.title) || i18n_.sorting_text_();
+            return ()=>// Show the title of the currently selected sorting when the sorting is closed, if there's currently a sorting selected
+                // This is to balance that both it should be easy to find the sorting and to see what sorting currently is set
+                // See issue description of https://gitlab.com/depict-ai/depict.ai/-/merge_requests/6537
+                _c$() && meta_of_currently_selected_sorting_()?.title || i18n_.sorting_text_();
         })());
         (0, $46MJV$solidjsweb.insert)(_el$12, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Show), {
             get when () {
@@ -4628,90 +4762,6 @@ function $cdc2c00c0a7da86e$export$466cdc317043f6cb({ quicklinks_data_: quicklink
 
 
 
-
-
-function $207f7b30db90d048$export$3945d6db2dfd3d12({ crumb_data_: crumb_data_ , query_id_: query_id_ , i18n_: i18n_ , selected_filters_: selected_filters_ , local_filter_cache_: local_filter_cache_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , plp_results_: plp_results_ , router_: router_  }) {
-    // If we just got opened in a new tab, clear filters instantly and remove the flag
-    $207f7b30db90d048$var$clear_if_opened_new_tab_with_sideways_url_params_flag({
-        plp_results_: plp_results_,
-        local_filter_cache_: local_filter_cache_,
-        expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-        selected_filters_: selected_filters_,
-        i18n_: i18n_,
-        router_: router_
-    });
-    // Code below is for when we're already open and the user navigates to a new category
-    let previous_crumb_data = (0, $46MJV$solidjs.untrack)(crumb_data_);
-    let query_id_when_we_got_previous_data = (0, $46MJV$solidjs.untrack)(query_id_);
-    let allow_filter_clearing = true; // set to false when going backwards/forwards
-    // temporarily disable filter clearing when going backwards/forwards
-    const handler = ()=>allow_filter_clearing = false;
-    window.addEventListener("popstate", handler); // popstate only gets called when using back/forwards button of browser or the history navigate to achieve the same, but not on pushState or replaceState
-    (0, $46MJV$solidjs.onCleanup)(()=>window.removeEventListener("popstate", handler));
-    (0, $46MJV$solidjs.createEffect)((0, $46MJV$solidjs.on)(crumb_data_, (0, $46MJV$depictaiutilishared.catchify)((new_crumb_data)=>{
-        const query_id_of_new_data = query_id_();
-        if (allow_filter_clearing && previous_crumb_data && new_crumb_data && query_id_of_new_data !== query_id_when_we_got_previous_data) {
-            const previous_length = previous_crumb_data.length;
-            const new_length = new_crumb_data.length;
-            const went_upwards = new_length < previous_length;
-            const went_downwards = previous_length < new_length;
-            const shorter_array = went_upwards ? new_crumb_data : previous_crumb_data;
-            const longer_array = went_upwards ? previous_crumb_data : new_crumb_data;
-            if (!((went_upwards || went_downwards) && shorter_array.every(({ query_id: query_id  }, index)=>longer_array[index].query_id === query_id))) {
-                // We went sideways, not up or down. Clear filters.
-                (0, $92e4e7906daa1ff8$export$8895d39404bd2bb1)({
-                    user_triggered_: false,
-                    i18n_: i18n_,
-                    also_clear_sorting_: false,
-                    selected_filters_: selected_filters_,
-                    expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-                    local_filter_cache_: local_filter_cache_
-                });
-                // Also ensure we don't have `sideways_url_params_flag` set anymore
-                $207f7b30db90d048$var$delete_sideways_param_flag(router_);
-            }
-        }
-        query_id_when_we_got_previous_data = query_id_of_new_data;
-        previous_crumb_data = new_crumb_data;
-        if (!allow_filter_clearing) allow_filter_clearing = true;
-    })));
-}
-function $207f7b30db90d048$var$clear_if_opened_new_tab_with_sideways_url_params_flag({ plp_results_: plp_results_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , i18n_: i18n_ , selected_filters_: selected_filters_ , local_filter_cache_: local_filter_cache_ , router_: router_  }) {
-    const tracking_function_for_plp_results = (0, $46MJV$solidjs.createReaction)(()=>{
-        // On first rendering of the CategoryPage (after we have results), check if we got to this URL by going sideways in QuickLinks and clear filters with toast if so
-        const had_flag = $207f7b30db90d048$var$delete_sideways_param_flag(router_);
-        if (!had_flag) return;
-        (0, $46MJV$depictaiutilishared.dlog)("Flag to clear filters was set, clearing filters");
-        (0, $46MJV$depictaiutilishared.queueMacroTask)(()=>{
-            // Do it next task so that all the filters have time to populate
-            (0, $92e4e7906daa1ff8$export$8895d39404bd2bb1)({
-                user_triggered_: false,
-                i18n_: i18n_,
-                also_clear_sorting_: false,
-                selected_filters_: selected_filters_,
-                expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-                local_filter_cache_: local_filter_cache_
-            });
-        });
-    });
-    tracking_function_for_plp_results(plp_results_);
-}
-function $207f7b30db90d048$var$delete_sideways_param_flag(router) {
-    const url_object = new URL(location.href);
-    const { searchParams: searchParams  } = url_object;
-    if (searchParams.get((0, $c6a04c153e9853a7$export$e2cf3f19dd3f8aac)) !== "true") return false;
-    searchParams.delete((0, $c6a04c153e9853a7$export$e2cf3f19dd3f8aac));
-    router.navigate_.go_to_({
-        new_url_: url_object,
-        is_replace_: true,
-        force_spa_navigation_: true
-    });
-    return true;
-}
-
-
-
-
 const $151280ad98f4438b$var$max_history_change_frequency = 300;
 const $151280ad98f4438b$var$api_max_products_per_request = 100;
 function $151280ad98f4438b$export$6e49da55e449af7c({ scroll_restoration_data_: [, set_scroll_restoration_data] , last_result_in_viewport_: [get_last_result_in_viewport_] , id_: id_ , can_write_scroll_restoration_: can_write_scroll_restoration_  }) {
@@ -4824,8 +4874,92 @@ let $29b757e2ae26852c$export$44dad306455dddf;
 })($29b757e2ae26852c$export$44dad306455dddf || ($29b757e2ae26852c$export$44dad306455dddf = {}));
 
 
+
+
+
+
+function $207f7b30db90d048$export$3945d6db2dfd3d12({ crumb_data_: crumb_data_ , query_id_: query_id_ , i18n_: i18n_ , selected_filters_: selected_filters_ , local_filter_cache_: local_filter_cache_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , plp_results_: plp_results_ , router_: router_  }) {
+    // If we just got opened in a new tab, clear filters instantly and remove the flag
+    $207f7b30db90d048$var$clear_if_opened_new_tab_with_sideways_url_params_flag({
+        plp_results_: plp_results_,
+        local_filter_cache_: local_filter_cache_,
+        expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+        selected_filters_: selected_filters_,
+        i18n_: i18n_,
+        router_: router_
+    });
+    // Code below is for when we're already open and the user navigates to a new category
+    let previous_crumb_data = (0, $46MJV$solidjs.untrack)(crumb_data_);
+    let query_id_when_we_got_previous_data = (0, $46MJV$solidjs.untrack)(query_id_);
+    let allow_filter_clearing = true; // set to false when going backwards/forwards
+    // temporarily disable filter clearing when going backwards/forwards
+    const handler = ()=>allow_filter_clearing = false;
+    window.addEventListener("popstate", handler); // popstate only gets called when using back/forwards button of browser or the history navigate to achieve the same, but not on pushState or replaceState
+    (0, $46MJV$solidjs.onCleanup)(()=>window.removeEventListener("popstate", handler));
+    (0, $46MJV$solidjs.createEffect)((0, $46MJV$solidjs.on)(crumb_data_, (0, $46MJV$depictaiutilishared.catchify)((new_crumb_data)=>{
+        const query_id_of_new_data = query_id_();
+        if (allow_filter_clearing && previous_crumb_data && new_crumb_data && query_id_of_new_data !== query_id_when_we_got_previous_data) {
+            const previous_length = previous_crumb_data.length;
+            const new_length = new_crumb_data.length;
+            const went_upwards = new_length < previous_length;
+            const went_downwards = previous_length < new_length;
+            const shorter_array = went_upwards ? new_crumb_data : previous_crumb_data;
+            const longer_array = went_upwards ? previous_crumb_data : new_crumb_data;
+            if (!((went_upwards || went_downwards) && shorter_array.every(({ query_id: query_id  }, index)=>longer_array[index].query_id === query_id))) {
+                // We went sideways, not up or down. Clear filters.
+                (0, $92e4e7906daa1ff8$export$8895d39404bd2bb1)({
+                    user_triggered_: false,
+                    i18n_: i18n_,
+                    also_clear_sorting_: false,
+                    selected_filters_: selected_filters_,
+                    expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+                    local_filter_cache_: local_filter_cache_
+                });
+                // Also ensure we don't have `sideways_url_params_flag` set anymore
+                $207f7b30db90d048$var$delete_sideways_param_flag(router_);
+            }
+        }
+        query_id_when_we_got_previous_data = query_id_of_new_data;
+        previous_crumb_data = new_crumb_data;
+        if (!allow_filter_clearing) allow_filter_clearing = true;
+    })));
+}
+function $207f7b30db90d048$var$clear_if_opened_new_tab_with_sideways_url_params_flag({ plp_results_: plp_results_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , i18n_: i18n_ , selected_filters_: selected_filters_ , local_filter_cache_: local_filter_cache_ , router_: router_  }) {
+    const tracking_function_for_plp_results = (0, $46MJV$solidjs.createReaction)(()=>{
+        // On first rendering of the CategoryPage (after we have results), check if we got to this URL by going sideways in QuickLinks and clear filters with toast if so
+        const had_flag = $207f7b30db90d048$var$delete_sideways_param_flag(router_);
+        if (!had_flag) return;
+        (0, $46MJV$depictaiutilishared.dlog)("Flag to clear filters was set, clearing filters");
+        (0, $46MJV$depictaiutilishared.queueMacroTask)(()=>{
+            // Do it next task so that all the filters have time to populate
+            (0, $92e4e7906daa1ff8$export$8895d39404bd2bb1)({
+                user_triggered_: false,
+                i18n_: i18n_,
+                also_clear_sorting_: false,
+                selected_filters_: selected_filters_,
+                expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+                local_filter_cache_: local_filter_cache_
+            });
+        });
+    });
+    tracking_function_for_plp_results(plp_results_);
+}
+function $207f7b30db90d048$var$delete_sideways_param_flag(router) {
+    const url_object = new URL(location.href);
+    const { searchParams: searchParams  } = url_object;
+    if (searchParams.get((0, $c6a04c153e9853a7$export$e2cf3f19dd3f8aac)) !== "true") return false;
+    searchParams.delete((0, $c6a04c153e9853a7$export$e2cf3f19dd3f8aac));
+    router.navigate_.go_to_({
+        new_url_: url_object,
+        is_replace_: true,
+        force_spa_navigation_: true
+    });
+    return true;
+}
+
+
 const $671632478f2a7ce7$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="product-count"> </div>`, 2), $671632478f2a7ce7$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div></div>`, 2), $671632478f2a7ce7$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="filter-results-for-one-row"></div>`, 2), $671632478f2a7ce7$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict plp category"><div class="listing-page"></div></div>`, 4);
-function $671632478f2a7ce7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , slider_arrow_button_: slider_arrow_button_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , rr_options_: rr_options_ , get_product_id_: get_product_id_  }) {
+function $671632478f2a7ce7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , slider_arrow_button_: slider_arrow_button_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_  }) {
     let results_for;
     let only_show_filters_opener_;
     let middle_elements_;
@@ -4835,12 +4969,6 @@ function $671632478f2a7ce7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
         show_n_results_: incoming_i18n.show_n_products_,
         no_results_text_: incoming_i18n.no_products_text_
     };
-    const tenant_object_ = new (0, $46MJV$depictaiutilishared.Tenant)({
-        TENANT: (0, $46MJV$solidjs.untrack)(tenant_),
-        MARKET: (0, $46MJV$solidjs.untrack)(market_),
-        GA_ID: "",
-        get_product_id: get_product_id_
-    });
     const [get_sorting] = current_sorting_;
     const number_of_rendered_selected_filters_items_ = (0, $46MJV$solidjs.createSignal)(0);
     const first_result_in_viewport_ = (0, $46MJV$solidjs.createSignal)();
@@ -5077,11 +5205,9 @@ function $671632478f2a7ce7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
                         last_result_in_viewport_: last_result_in_viewport_,
                         scroll_restoration_data_: scroll_restoration_data_,
                         layout_options_: layout_options_,
-                        rr_options_: rr_options_,
+                        product_card_template_: product_card_template_,
                         sort_or_filter_open_: sort_or_filter_open_,
                         desktop_filter_elements_: desktop_filter_elements_,
-                        tenant_object_: tenant_object_,
-                        type_for_tracking_: "category",
                         id_currently_querying_for_: query_id_,
                         no_results_options_: {
                             selected_filters_: selected_filters_,
@@ -5520,7 +5646,7 @@ class $068a627cc18f7bb6$export$f34314aa9505732e {
         });
     }
 }
-function $068a627cc18f7bb6$export$e2bf8ce7779e827e({ depict_category: depict_category , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , get_product_id: get_product_id , show_breadcrumbs: show_breadcrumbs = true , show_quicklinks: show_quicklinks = true , category_title: category_title  }) {
+function $068a627cc18f7bb6$export$e2bf8ce7779e827e({ depict_category: depict_category , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , show_breadcrumbs: show_breadcrumbs = true , show_quicklinks: show_quicklinks = true , category_title: category_title  }) {
     const shared_properties = $068a627cc18f7bb6$var$get_shared_properties(depict_category);
     const grid_spacing_override = typeof grid_spacing === "string" ? {
         grid_spacing: grid_spacing
@@ -5553,17 +5679,11 @@ function $068a627cc18f7bb6$export$e2bf8ce7779e827e({ depict_category: depict_cat
             expanded_hierarchical_filters_: expanded_hierarchical_filters_,
             selected_filters_: selected_filters_,
             scroll_restoration_data_: scroll_restoration_data_,
-            get_product_id_: get_product_id,
             layout_options_: {
                 cols_at_size: (0, $7958d3dbd96a4f87$export$6daf8749b65a1b77)(cols_at_size),
                 ...grid_spacing_override
             },
-            rr_options_: {
-                template: (display, info)=>{
-                    const is_placeholder = info.rendering_options.type === "placeholder";
-                    return product_card_template(is_placeholder ? null : display, info);
-                }
-            }
+            product_card_template_: product_card_template
         });
     }, "Entire CategoryPage failed");
 }
@@ -5969,22 +6089,48 @@ function $2989e355f64e18e1$export$b94867ecbd698f21({ search_field_value_: search
 
 
 
+
+
 const $9f81b7ced87aabf2$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="cards"></div>`, 2), $9f81b7ced87aabf2$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="search-recs"><h3 class="search-recs-title"></h3></div>`, 4), $9f81b7ced87aabf2$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<button class="show-more major" type="button"></button>`, 2);
 const $9f81b7ced87aabf2$export$1c8c715550dc689d = 2;
-function $9f81b7ced87aabf2$export$7de92c4c2205ebf3({ depict_api_: depict_api_ , i18n_: i18n_ , tenant_object_: tenant_object_ , search_query_base_: search_query_base_ , rr_options_: rr_options_ , showing_recommendation_rows_: showing_recommendation_rows_ , view_more_button_: view_more_button_ = true , layout_options_: layout_options_  }) {
-    const [is_showing_something, set_is_showing_something] = (0, $46MJV$solidjs.createSignal)(false);
-    const cards = $9f81b7ced87aabf2$var$_tmpl$.cloneNode(true);
-    const on_next_render = [];
-    const main_element = (()=>{
+function $9f81b7ced87aabf2$export$7de92c4c2205ebf3({ depict_api_: depict_api_ , i18n_: i18n_ , search_query_base_: search_query_base_ , product_card_template_: product_card_template_ , showing_recommendation_rows_: showing_recommendation_rows_ , view_more_button_: view_more_button_ = true , layout_options_: layout_options_  }) {
+    const [get_showing_recommendation_rows] = showing_recommendation_rows_; // We reset this in after_submit in search.tsx FYI
+    const rows_object = view_more_button_ ? $9f81b7ced87aabf2$var$make_state_saved_rows(showing_recommendation_rows_, i18n_) : "all";
+    const [recommendations_resource] = (0, $46MJV$solidjs.createResource)(search_query_base_, (query)=>depict_api_.get_recommended(query).then((r)=>r.displays));
+    const is_showing_something = (0, $46MJV$solidjs.createMemo)(()=>recommendations_resource.loading || recommendations_resource()?.length);
+    const num_placeholders_ = (0, $46MJV$solidjs.createMemo)(()=>(0, $39d15a684cb3e309$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...layout_options_.cols_at_size.map(([per_column])=>per_column)));
+    const cards = (()=>{
+        const _el$ = $9f81b7ced87aabf2$var$_tmpl$.cloneNode(true);
+        (0, $46MJV$solidjsweb.insert)(_el$, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Suspense), {
+            get fallback () {
+                return (0, $7b0b7e887b485a91$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_ = (0, $ea6c1dd5af2900d8$export$7f8bd308237ab5a5)((0, $46MJV$solidjs.createMemo)(()=>recommendations_resource() || []));
+                    return (0, $ea6c1dd5af2900d8$export$43f0fb951fcb0c54)({
+                        displays_by_key_: displays_by_key_,
+                        merchant_: (0, $46MJV$solidjs.createMemo)(()=>search_query_base_().tenant),
+                        market_: (0, $46MJV$solidjs.createMemo)(()=>search_query_base_().market),
+                        product_card_template_: product_card_template_
+                    });
+                })();
+            }
+        }));
+        return _el$;
+    })();
+    const search_recs_elements = (()=>{
         const _el$2 = $9f81b7ced87aabf2$var$_tmpl$2.cloneNode(true), _el$3 = _el$2.firstChild;
         (0, $46MJV$solidjsweb.insert)(_el$3, ()=>i18n_.search_recs_title_());
         (0, $46MJV$solidjsweb.insert)(_el$2, (0, $8e863dc22b06b688$export$a2cc176055f8f08), null);
         (0, $46MJV$solidjsweb.insert)(_el$2, cards, null);
         return _el$2;
     })();
-    const [get_showing_recommendation_rows] = showing_recommendation_rows_;
-    const rows_object = view_more_button_ ? $9f81b7ced87aabf2$var$make_state_saved_rows(showing_recommendation_rows_, i18n_) : "all";
-    const cleanup_old_cards = [];
+    // the cards element must have a parent for Layout to work, therefore we're inserting it into a div above
     (0, $46MJV$depictaiutilishared.Layout)({
         container_element: cards,
         layout: "grid",
@@ -5994,77 +6140,11 @@ function $9f81b7ced87aabf2$export$7de92c4c2205ebf3({ depict_api_: depict_api_ ,
             e,
             "Layout failed"
         ], "error"));
-    // copied from RecommendationGrid
-    // convoluted lazy loading that
-    // when the elements are in the DOM starts IntersectionObserver on whole grid
-    // when grid intersects starts Lazyfier
-    // this is because Lazyfier is fucking stupid
-    (0, $46MJV$depictaiutilishared.observer).wait_for_element(cards).then((0, $46MJV$depictaiutilishared.catchify)((element)=>{
-        let start_lazy_loading;
-        const lazy_loading_promise = new Promise((r)=>start_lazy_loading = r);
-        const lf = new (0, $46MJV$depictaiutilishared.Lazyfier)({
-            only_load_intersecting: true,
-            wait_for_dominsertion: lazy_loading_promise,
-            ignore_data_urls: true,
-            lazyfinder: {
-                unload () {}
-            }
-        });
-        lf.start_observing_for_new_children_(element);
-        const i_o = new IntersectionObserver((0, $46MJV$depictaiutilishared.catchify)((records)=>{
-            for (const record of records)if (record.intersectionRatio > 0) {
-                start_lazy_loading();
-                i_o.disconnect();
-                return;
-            }
-        }));
-        i_o.observe(cards);
-    }));
-    const deparallelized_recs_fetcher = (0, $46MJV$depictaiutilishared.deparallelize_no_drop)((0, $46MJV$depictaiutilishared.catchify)(async (base_query)=>{
-        const recs_promise = depict_api_.get_recommended(base_query).then((r)=>r.displays);
-        // create owner to run product cards with an Owner, so they know when they've gotten removed
-        const [owner_for_cards, dispose_our_cards] = (0, $46MJV$solidjs.createRoot)((dispose)=>[
-                (0, $46MJV$solidjs.getOwner)(),
-                dispose
-            ]);
-        const rendering_result = await (await (0, $46MJV$depictaiutilishared.make_placeholder_rr)({
-            // render the max amount of elements that there could be, to make sure scroll restoration works (placeholders can't be shorter than actual content)
-            num_items: (0, $39d15a684cb3e309$export$6c9030e511152266) + (0, $46MJV$solidjs.untrack)(get_showing_recommendation_rows) * Math.max(...layout_options_.cols_at_size.map(([per_column])=>per_column))
-        }))(tenant_object_, // @ts-ignore - make_placeholder_rr types is a touchy subject
-        {
-            type: "search_recs",
-            recs: recs_promise,
-            ...rr_options_,
-            ...typeof rr_options_.template === "function" ? {
-                template: (...args)=>(0, $46MJV$solidjs.runWithOwner)(owner_for_cards, ()=>// give template the possibility to know when it gets removed from the DOM by using solid-js onCleanup
-                        // @ts-ignore
-                        rr_options_.template(...args))
-            } : {}
-        });
-        const { elements: elements , should_stay_inserted: should_stay_inserted  } = rendering_result;
-        let dead = false;
-        while(on_next_render.length)on_next_render.pop()();
-        on_next_render.push(()=>dead = true);
-        if (!elements) {
-            set_is_showing_something(false);
-            return;
-        }
-        cards.replaceChildren(...elements);
-        // Dispose the old cards just after the cards have been removed from the DOM
-        cleanup_old_cards.forEach((cleanup_function)=>cleanup_function());
-        cleanup_old_cards.push(dispose_our_cards); // push after calling, so that we don't instantly demolish ourselves lol
-        set_is_showing_something(true);
-        should_stay_inserted?.then((should)=>{
-            if (!should && !dead /* just in case */ ) set_is_showing_something(false);
-        });
-    }));
-    (0, $46MJV$solidjs.createRenderEffect)(()=>deparallelized_recs_fetcher(search_query_base_()));
-    (0, $46MJV$solidjs.onCleanup)(()=>cleanup_old_cards.forEach((fn)=>fn())); // if everything gets cleaned up without new cards replacing the old ones, clean up the last cards
     return (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Show), {
         get when () {
             return is_showing_something();
         },
-        children: main_element
+        children: search_recs_elements
     });
 }
 function $9f81b7ced87aabf2$var$make_state_saved_rows([get_showing_recommendation_rows, set_showing_recommendation_rows], i18n_) {
@@ -6276,7 +6356,8 @@ async function $1c323edfb89c9dca$export$e16630ecb9644a1c({ on_submit_with_unchan
 
 
 const $1bf0125991f2d39b$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<span class="orig price"></span>`, 2), $1bf0125991f2d39b$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<a class="instant-card"><div class="img-part"></div><div class="right-part"><div class="title-brand-tagline"><span class="brand"></span><span class="title"></span></div><div class="price-container"><span class="price"></span></div></div></a>`, 16), $1bf0125991f2d39b$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="tagline"></div>`, 2);
-const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container, { i18n: i18n , market: market  }, router_)=>{
+const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container, { i18n: i18n  }, router_)=>{
+    const search_result_id = (0, $46MJV$solidjs.createMemo)(()=>display_or_variant_container().search_result_id);
     const display = (0, $46MJV$solidjs.createMemo)(()=>{
         const display = display_or_variant_container();
         // Support for backend's new display format
@@ -6294,19 +6375,19 @@ const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container,
     });
     const image_url = (0, $46MJV$solidjs.createMemo)(()=>display().image_url);
     const contained_image = (0, $46MJV$solidjs.createMemo)(()=>(0, $46MJV$depictaiutilishared.ContainedImage)({
+            loading: "lazy",
             aspect_ratio: 1,
             alt: "",
             rendering_options: {},
-            // @ts-ignore
-            "data-src": image_url(),
+            "src": image_url(),
             srcset_opts: {
-                set_dataset: true
+                set_dataset: false
             },
-            init_with_placeholder: true
+            sizes: "0px"
         }));
     const is_sale = (0, $46MJV$solidjs.createMemo)(()=>display().sale_price !== display().original_price);
     const href = (0, $46MJV$solidjs.createMemo)(()=>display().page_url);
-    const returnVal = (()=>{
+    return (()=>{
         const _el$ = $1bf0125991f2d39b$var$_tmpl$2.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$9 = _el$7.firstChild;
         (0, $46MJV$solidjsweb.addEventListener)(_el$, "click", (0, $46MJV$depictaiutilishared.catchify)((event_)=>router_.navigate_.go_to_({
                 new_url_: href(),
@@ -6357,18 +6438,18 @@ const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container,
         }), null);
         (0, $46MJV$solidjsweb.insert)(_el$9, ()=>i18n.price_formatting_().post_, null);
         (0, $46MJV$solidjsweb.effect)((_p$)=>{
-            const _v$ = href(), _v$2 = !!is_sale();
+            const _v$ = href(), _v$2 = search_result_id(), _v$3 = !!is_sale();
             _v$ !== _p$._v$ && (0, $46MJV$solidjsweb.setAttribute)(_el$, "href", _p$._v$ = _v$);
-            _v$2 !== _p$._v$2 && _el$9.classList.toggle("sales-price", _p$._v$2 = _v$2);
+            _v$2 !== _p$._v$2 && (0, $46MJV$solidjsweb.setAttribute)(_el$, "data-search-result-id", _p$._v$2 = _v$2);
+            _v$3 !== _p$._v$3 && _el$9.classList.toggle("sales-price", _p$._v$3 = _v$3);
             return _p$;
         }, {
             _v$: undefined,
-            _v$2: undefined
+            _v$2: undefined,
+            _v$3: undefined
         });
         return _el$;
     })();
-    // This solves a JSX type issue where the return value does not match with the explicit JSX.Element type for some reason
-    return returnVal;
 };
 (0, $46MJV$solidjsweb.delegateEvents)([
     "click"
@@ -6405,7 +6486,7 @@ function $4cadf33fd6aaf4b6$export$62f101a8aa597bf8({ depict_api_: depict_api_ ,
         }));
     const sliced_displays = (0, $46MJV$solidjs.createMemo)(()=>search_results()?.displays?.slice(0, max_cards));
     let placeholder;
-    const container = (()=>{
+    return (()=>{
         const _el$ = $4cadf33fd6aaf4b6$var$_tmpl$.cloneNode(true);
         (0, $46MJV$solidjsweb.insert)(_el$, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Show), {
             get when () {
@@ -6423,8 +6504,8 @@ function $4cadf33fd6aaf4b6$export$62f101a8aa597bf8({ depict_api_: depict_api_ ,
                     get each () {
                         return sliced_displays();
                     },
-                    children: (d, i)=>$4cadf33fd6aaf4b6$var$track_elements(d, i, // Custom instant card requires a re-render on every display or i18n update
-                        render_instant_card_ ? (0, $46MJV$solidjs.createMemo)(()=>render_instant_card_(d(), {
+                    children: (d, i)=>{
+                        const card = render_instant_card_ ? (0, $46MJV$solidjs.createMemo)(()=>render_instant_card_(d(), {
                                 index: i,
                                 i18n: (0, $850f0c7c629012e3$export$27b710c08412a7ad)(i18n_),
                                 merchant: tenant_(),
@@ -6434,79 +6515,14 @@ function $4cadf33fd6aaf4b6$export$62f101a8aa597bf8({ depict_api_: depict_api_ ,
                             i18n: i18n_,
                             merchant: tenant_(),
                             market: market_()
-                        }, router_), tenant_, market_)
+                        }, router_);
+                        return card;
+                    }
                 });
             }
         }));
         return _el$;
     })();
-    new (0, $46MJV$depictaiutilishared.Lazyfier)({
-        container: container,
-        lazyfinder: {
-            unload () {}
-        },
-        ignore_data_urls: true
-    });
-    return container;
-}
-function $4cadf33fd6aaf4b6$var$track_elements(display, index, elements, tenant, market) {
-    const type = "instant_result";
-    const unwrapped_elements = $4cadf33fd6aaf4b6$var$unwrap_solid_jsx_element(elements);
-    const disconnectors = [];
-    (0, $46MJV$solidjs.createComputed)(()=>{
-        let stop = false;
-        const modern_or_legacy_d = display(); // For every display
-        const d = "variant_index" in modern_or_legacy_d ? modern_or_legacy_d.variant_displays[modern_or_legacy_d.variant_index] : modern_or_legacy_d;
-        const t = tenant(); // and tenant
-        const m = market(); // / market combination
-        const click_handler = ()=>{
-            (0, $46MJV$depictaiutilishared.depict_click)({
-                tenant: (0, $46MJV$solidjs.untrack)(tenant),
-                market: (0, $46MJV$solidjs.untrack)(market),
-                ...d,
-                click_location: type + "_" + (index + 1),
-                recommendation_type: type
-            });
-            localStorage.setItem(`depict_attribution_${d.product_id}`, d.search_result_id);
-        };
-        while(disconnectors.length)// disconnect stuff from old display
-        disconnectors.pop()();
-        disconnectors.push(()=>stop = true);
-        (0, $46MJV$solidjs.createComputed)(()=>{
-            if (stop) return;
-            const filtered_els = unwrapped_elements().filter((el)=>el instanceof Element);
-            for (const element of filtered_els){
-                element.addEventListener("click", click_handler);
-                disconnectors.push((0, $46MJV$depictaiutilishared.impression_track_element)({
-                    element: element,
-                    data: {
-                        tenant: t,
-                        market: m,
-                        recommendation_type: type,
-                        recommendation_id: d.recommendation_id,
-                        product_id: d.product_id,
-                        entity_price: d.entity_price
-                    }
-                }), ()=>element.removeEventListener("click", click_handler));
-            }
-            (0, $46MJV$depictaiutilishared.add_new_tab_listener)(filtered_els, d, 1, (disconnector)=>disconnectors.push(disconnector));
-        });
-    });
-    return elements;
-}
-function $4cadf33fd6aaf4b6$var$unwrap_solid_jsx_element(elements) {
-    // FYI this probably doesn't work on hugely deep nestings or large amount of elements
-    return (0, $46MJV$solidjs.createMemo)(()=>$4cadf33fd6aaf4b6$var$unwrapping_helper(elements));
-}
-function $4cadf33fd6aaf4b6$var$unwrapping_helper(elements) {
-    const result = [];
-    if (Array.isArray(elements)) for(let i = 0; i < elements.length; i++){
-        const element = elements[i];
-        result.push(...$4cadf33fd6aaf4b6$var$unwrapping_helper(element));
-    }
-    else if (typeof elements == "function") result.push(...$4cadf33fd6aaf4b6$var$unwrapping_helper(elements()));
-    else if (elements != undefined && typeof elements != "boolean") result.push(elements);
-    return result;
 }
 
 
@@ -7547,13 +7563,7 @@ function $297ca03cb5dd5701$export$9dd50d35b9d94fdf({ get_search_query_: get_sear
 
 const $93779a41dce11249$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="filter-results-for-one-row"></div>`, 2), $93779a41dce11249$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict plp search"><div class="listing-page"></div></div>`, 4);
 function $93779a41dce11249$export$a54ec244c8863715(opts) {
-    const { depict_api_: depict_api_ , search_field_value_: search_field_value_ , get_search_query_: get_search_query_ , open_modal_: open_modal_ , submit_query_: submit_query_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , search_filters_open_: search_filters_open_ , search_sorting_open_: search_sorting_open_ , expanded_filters_: expanded_filters_ , input_modal_open_: input_modal_open_ , selected_filters_: selected_filters_ , i18n_: i18n_ , slider_arrow_button_: slider_arrow_button_ , make_category_suggestion_card_: make_category_suggestion_card_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , clear_filters_on_next_submit_: clear_filters_on_next_submit_ , local_filter_cache_: local_filter_cache_ , include_input_field_: include_input_field_ , tenant_: tenant_ , market_: market_ , showing_recommendation_rows_: showing_recommendation_rows_ , rr_options_: rr_options_ , recommendations_rr_options_: recommendations_rr_options_ = rr_options_ , search_recs_view_more_: search_recs_view_more_ , get_product_id_: get_product_id_ , disable_search_recommendations_: disable_search_recommendations_ , layout_options_: layout_options_ , recommendations_layout_options_: recommendations_layout_options_ = layout_options_ , scroll_restoration_data_: scroll_restoration_data_  } = opts;
-    const tenant_object_ = new (0, $46MJV$depictaiutilishared.Tenant)({
-        TENANT: (0, $46MJV$solidjs.untrack)(tenant_),
-        MARKET: (0, $46MJV$solidjs.untrack)(market_),
-        GA_ID: "",
-        get_product_id: get_product_id_
-    });
+    const { depict_api_: depict_api_ , search_field_value_: search_field_value_ , get_search_query_: get_search_query_ , open_modal_: open_modal_ , submit_query_: submit_query_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , search_filters_open_: search_filters_open_ , search_sorting_open_: search_sorting_open_ , expanded_filters_: expanded_filters_ , input_modal_open_: input_modal_open_ , selected_filters_: selected_filters_ , i18n_: i18n_ , slider_arrow_button_: slider_arrow_button_ , make_category_suggestion_card_: make_category_suggestion_card_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , clear_filters_on_next_submit_: clear_filters_on_next_submit_ , local_filter_cache_: local_filter_cache_ , include_input_field_: include_input_field_ , tenant_: tenant_ , market_: market_ , showing_recommendation_rows_: showing_recommendation_rows_ , search_recs_view_more_: search_recs_view_more_ , disable_search_recommendations_: disable_search_recommendations_ , layout_options_: layout_options_ , recommendations_layout_options_: recommendations_layout_options_ = layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_  } = opts;
     const [get_sorting] = current_sorting_;
     const all_products_loaded_ = (0, $46MJV$solidjs.createSignal)(false);
     const [get_all_products_loaded, set_all_products_loaded] = all_products_loaded_;
@@ -7704,10 +7714,6 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
         get_search_query_();
         (0, $fe1bd893954cc9ca$export$c7e181728ad525f)(location);
     });
-    (0, $46MJV$solidjs.createComputed)(()=>{
-        tenant_object_.tenant = tenant_object_.TENANT = tenant_();
-        tenant_object_.market = tenant_object_.MARKET = market_();
-    });
     return [
         document.createComment("Search page based on Depict SDK"),
         (()=>{
@@ -7763,11 +7769,9 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
                         last_result_in_viewport_: last_result_in_viewport_,
                         scroll_restoration_data_: scroll_restoration_data_,
                         desktop_filter_elements_: desktop_filter_elements_,
-                        rr_options_: rr_options_,
+                        product_card_template_: product_card_template_,
                         layout_options_: layout_options_,
                         sort_or_filter_open_: sort_or_filter_open_,
-                        tenant_object_: tenant_object_,
-                        type_for_tracking_: "search",
                         id_currently_querying_for_: get_search_query_,
                         no_results_options_: {
                             selected_filters_: selected_filters_,
@@ -7794,9 +7798,8 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
                                 search_query_base_: search_query_base_,
                                 layout_options_: recommendations_layout_options_,
                                 showing_recommendation_rows_: showing_recommendation_rows_,
-                                rr_options_: recommendations_rr_options_,
                                 view_more_button_: search_recs_view_more_,
-                                tenant_object_: tenant_object_
+                                product_card_template_: product_card_template_
                             });
                         }
                     });
@@ -8086,7 +8089,7 @@ function $79fbf145b15af988$var$get_shared_properties(depict_search) {
     if (!shared_properties) throw new Error("Can't connect to provided DepictSearch instance");
     return shared_properties;
 }
-function $79fbf145b15af988$export$f2dc7e4e4aa11abb({ depict_search: depict_search , include_input_field: include_input_field , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , get_product_id: get_product_id = (0, $46MJV$depictaiutilishared.normal_get_product_id) , extra_depict_options: extra_depict_options  }) {
+function $79fbf145b15af988$export$f2dc7e4e4aa11abb({ depict_search: depict_search , include_input_field: include_input_field , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , extra_depict_options: extra_depict_options  }) {
     const shared_properties = $79fbf145b15af988$var$get_shared_properties(depict_search);
     const grid_spacing_override = typeof grid_spacing === "string" ? {
         grid_spacing: grid_spacing
@@ -8153,15 +8156,7 @@ function $79fbf145b15af988$export$f2dc7e4e4aa11abb({ depict_search: depict_searc
                 height_: 12,
                 width_: 6.46
             }),
-            rr_options_: {
-                template: (display, info)=>{
-                    const is_placeholder = info.rendering_options.type === "placeholder";
-                    return product_card_template(is_placeholder ? null : display, info);
-                },
-                pre_processors: extra_depict_options?.pre_processors,
-                post_processors: extra_depict_options?.post_processors
-            },
-            get_product_id_: get_product_id
+            product_card_template_: product_card_template
         });
     }, "Entire SearchPage failed");
 }