@depict-ai/ui 2.1.4 → 2.1.6

package/ES10/index.cjs

@@ -76,7 +76,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.4";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.6";
 const $a68b73fd7ba0853f$var$fallback_operator = "in";
 const $a68b73fd7ba0853f$var$fallback_token = "";
 const $a68b73fd7ba0853f$var$legacy_filter_prefix = "filter_";
@@ -276,7 +276,6 @@ function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
     return _el$;
   })();
 }
-const $858fdcf73148519f$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<img>`);
 function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $52FdA$solidjs.createSignal(0);
   const resizeObserver = new ResizeObserver($52FdA$depictaiutilishared.catchify(records => {
@@ -304,6 +303,7 @@ function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
   });
   return size;
 }
+const $858fdcf73148519f$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
 function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   // Enable reactive props
   const otherOptions = $52FdA$solidjs.createMemo(() => {
@@ -326,16 +326,95 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
       srcset: srcset
     };
   });
-  return (() => {
-    const _el$ = $52FdA$solidjsweb.getNextElement($858fdcf73148519f$var$_tmpl$);
-    $52FdA$solidjsweb.spread(_el$, $52FdA$solidjsweb.mergeProps(otherOptions, src_options, {
-      get sizes() {
-        return props.size() + "px";
+  // Work around https://github.com/solidjs/solid/issues/1828
+  const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
+  const [hasSetSize, setHasSetSize] = $52FdA$solidjs.createSignal(false);
+  const [hasDecoded, setHasDecoded] = $52FdA$solidjs.createSignal(false);
+  const sizePX = $52FdA$solidjs.createMemo(() => "".concat(props.size(), "px")); // props.size could be a getter that expects a cleanup so get it in this memo instead of where we set img.sizes
+  const listingContext = $d067f3a30f047b41$export$8d0c4fdbb05a2f2e();
+  // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
+  // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
+  const executeWhenIdleBatched = fn => {
+    if (typeof requestIdleCallback !== "function") setTimeout(fn); // Old browsers don't get optimisation
+    const existingStack = listingContext === null || listingContext === void 0 ? void 0 : listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol];
+    if (existingStack) return existingStack.add(fn);
+    const newStack = new Set([fn]);
+    if (listingContext) listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol] = newStack;
+    const processStackWhenIdle = () => requestIdleCallback(deadline => {
+      const start = performance.now();
+      const thirdDeadlineTime = deadline.timeRemaining() / 3; // observers coming after this take up 2-3x the time so don't use all of it
+      for (const fn of newStack) {
+        newStack.delete(fn);
+        fn();
+        const timeTaken = performance.now() - start;
+        if ((!deadline.timeRemaining() || timeTaken > thirdDeadlineTime) && newStack.size) {
+          // There's still work to be done but no time, so schedule another idle callback
+          processStackWhenIdle();
+          return;
+        }
       }
-    }), false, false);
-    $52FdA$solidjsweb.runHydrationEvents();
-    return _el$;
-  })();
+      // Stack is empty
+      if (listingContext) delete listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol];
+    }, {
+      timeout: 15000
+    } // long timeout, better to not have images than to freeze the browser. But also we don't want to confuse user why no iamges are loading
+    );
+
+    processStackWhenIdle();
+  };
+  let sizeSetFastPath = false;
+  let hasDecodedFastPath = false;
+  let timeoutSet = false;
+  let gotCleanedUp = false;
+  $52FdA$solidjs.onCleanup(() => gotCleanedUp = true);
+  $52FdA$solidjsweb.spread(img, $52FdA$solidjs.mergeProps(otherOptions), false, true);
+  $52FdA$solidjs.createEffect(() => {
+    if (!props.size()) return; // wait until we have a size
+    if (timeoutSet) return;
+    const handler = $52FdA$depictaiutilishared.catchify(() => {
+      if (gotCleanedUp) return;
+      img.sizes = sizePX(); // use latest available value of props.size
+      if (!sizeSetFastPath) {
+        setHasSetSize(true);
+        sizeSetFastPath = true;
+      }
+      timeoutSet = false;
+    });
+    // Throttle the updating of sizes to avoid unnecessary image re-fetches during resize
+    // And also because we first set src after sizes has been set, wait with loading and decoding images until browser is idle
+    // This greatly improves performance when loading (more) products
+    // See https://depictaiworkspace.slack.com/archives/C05NJ0K3WRL/p1698220617663139
+    executeWhenIdleBatched(handler);
+    timeoutSet = true;
+  });
+  $52FdA$solidjs.createEffect(() => {
+    if (!props.size() || !hasSetSize()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
+    Object.assign(img, src_options());
+    // Add to DOM once decoded to not require/block any paints before image has completed loading and avoid showing broken image symbol
+    // We can do this because there has to be a container around us giving us a size
+    // No need to listen if we're already in the DOM
+    if (hasDecodedFastPath) return;
+    if (props.loading === "lazy") {
+      // For lazy loading there's no decoding to wait for as it only occurs when the image is visible
+      // Make sure src is set before we put the image into the DOM though so no broken image symbol is shown
+      setHasDecoded(true);
+      hasDecodedFastPath = true;
+    }
+    img.decode().catch(e => $52FdA$depictaiutilishared.dwarn("Failed to decode image", e, img)) // Display the image also if loading failed so webdev can debug and doesn't get "no image"
+    .then(async () => {
+      // Also wait with inserting image (i.e. paint) until browser is idle
+      await new Promise(r => executeWhenIdleBatched(r));
+      if (gotCleanedUp) return;
+      setHasDecoded(true);
+      hasDecodedFastPath = true;
+    });
+  });
+  return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+    get when() {
+      return hasDecoded();
+    },
+    children: img
+  });
 }
 function $858fdcf73148519f$var$make_srcset(url, resolutions) {
   return resolutions.map(width => "".concat($858fdcf73148519f$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
@@ -373,7 +452,7 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     $52FdA$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  container.append($52FdA$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), {
+  $52FdA$solidjsweb.insert(container, $52FdA$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), {
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $52FdA$solidjs.createMemo(() => {

package/ES10/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.4";
+export const version = "2.1.6";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -152,17 +152,19 @@ export function ImageContainer(props: {
 export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 /**
  * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
+ * Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
  * This is used for our responsive images:
  * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
  * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
  * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
+ * You need to use insert(domNode, <ShopifyResponsiveImg size={sizeAccessor} src={src} />) if you want to insert the return value of this component into a DOM element manually, where you `import { insert } from "solid-js/web";` because we first want to insert the image once it has loaded.
  */
 export function ShopifyResponsiveImg(props: {
   resolutions?: number[];
   size: Accessor<number>;
 } & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
   src: string;
-}): HTMLImageElement;
+}): JSX.Element;
 export const shopifyContainedImageContextSymbol: unique symbol;
 /**
  * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.

package/ES10/index.js

@@ -1,6 +1,6 @@
-import { add_to_version_info as $8tj43$add_to_version_info, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, dlog as $8tj43$dlog, queueMacroTask as $8tj43$queueMacroTask, catchify as $8tj43$catchify, is_safari as $8tj43$is_safari, observer as $8tj43$observer, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, slider_fractional_factory as $8tj43$slider_fractional_factory, camelCasifyObject as $8tj43$camelCasifyObject, make_random_classname as $8tj43$make_random_classname, n_col_styling_with_dist as $8tj43$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $8tj43$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $8tj43$layout_get_total_rec_amount_for_row, layout_media_query_header as $8tj43$layout_media_query_header, report as $8tj43$report, useExpandingContainer as $8tj43$useExpandingContainer, standard_price_format as $8tj43$standard_price_format, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, fetch_recs as $8tj43$fetch_recs, snakeCasifyObject as $8tj43$snakeCasifyObject, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, base_url as $8tj43$base_url, get_depict_id as $8tj43$get_depict_id, get_user_id as $8tj43$get_user_id, get_session_id as $8tj43$get_session_id, make_url_with_query_params as $8tj43$make_url_with_query_params, fetch_retry as $8tj43$fetch_retry, add_version_query_params as $8tj43$add_version_query_params, dwarn as $8tj43$dwarn, sort_obj as $8tj43$sort_obj, edit_current_page_meta_tags as $8tj43$edit_current_page_meta_tags, javascript_media_query as $8tj43$javascript_media_query, use_href_accessor as $8tj43$use_href_accessor, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, ContainedImage as $8tj43$ContainedImage, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, ListenableSet as $8tj43$ListenableSet, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { createComponent as $8tj43$createComponent, template as $8tj43$template, getNextElement as $8tj43$getNextElement, effect as $8tj43$effect, style as $8tj43$style, spread as $8tj43$spread, mergeProps as $8tj43$mergeProps, runHydrationEvents as $8tj43$runHydrationEvents, insert as $8tj43$insert, setAttribute as $8tj43$setAttribute, isServer as $8tj43$isServer, addEventListener as $8tj43$addEventListener, className as $8tj43$className, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, classList as $8tj43$classList, getNextMarker as $8tj43$getNextMarker, Dynamic as $8tj43$Dynamic, use as $8tj43$use, setProperty as $8tj43$setProperty } from "solid-js/web";
-import { createSignal as $8tj43$createSignal, getOwner as $8tj43$getOwner, createEffect as $8tj43$createEffect, runWithOwner as $8tj43$runWithOwner, onCleanup as $8tj43$onCleanup, createMemo as $8tj43$createMemo, createContext as $8tj43$createContext, useContext as $8tj43$useContext, createResource as $8tj43$createResource, Suspense as $8tj43$Suspense, Show as $8tj43$Show, untrack as $8tj43$untrack, createRenderEffect as $8tj43$createRenderEffect, Index as $8tj43$Index, createRoot as $8tj43$createRoot, For as $8tj43$For, createUniqueId as $8tj43$createUniqueId, createComputed as $8tj43$createComputed, ErrorBoundary as $8tj43$ErrorBoundary, on as $8tj43$on, batch as $8tj43$batch, createReaction as $8tj43$createReaction, mapArray as $8tj43$mapArray, mergeProps as $8tj43$mergeProps1 } from "solid-js";
+import { add_to_version_info as $8tj43$add_to_version_info, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, dlog as $8tj43$dlog, queueMacroTask as $8tj43$queueMacroTask, catchify as $8tj43$catchify, is_safari as $8tj43$is_safari, observer as $8tj43$observer, dwarn as $8tj43$dwarn, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, slider_fractional_factory as $8tj43$slider_fractional_factory, camelCasifyObject as $8tj43$camelCasifyObject, make_random_classname as $8tj43$make_random_classname, n_col_styling_with_dist as $8tj43$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $8tj43$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $8tj43$layout_get_total_rec_amount_for_row, layout_media_query_header as $8tj43$layout_media_query_header, report as $8tj43$report, useExpandingContainer as $8tj43$useExpandingContainer, standard_price_format as $8tj43$standard_price_format, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, fetch_recs as $8tj43$fetch_recs, snakeCasifyObject as $8tj43$snakeCasifyObject, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, base_url as $8tj43$base_url, get_depict_id as $8tj43$get_depict_id, get_user_id as $8tj43$get_user_id, get_session_id as $8tj43$get_session_id, make_url_with_query_params as $8tj43$make_url_with_query_params, fetch_retry as $8tj43$fetch_retry, add_version_query_params as $8tj43$add_version_query_params, sort_obj as $8tj43$sort_obj, edit_current_page_meta_tags as $8tj43$edit_current_page_meta_tags, javascript_media_query as $8tj43$javascript_media_query, use_href_accessor as $8tj43$use_href_accessor, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, ContainedImage as $8tj43$ContainedImage, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, ListenableSet as $8tj43$ListenableSet, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { createComponent as $8tj43$createComponent, insert as $8tj43$insert, template as $8tj43$template, getNextElement as $8tj43$getNextElement, effect as $8tj43$effect, style as $8tj43$style, spread as $8tj43$spread, setAttribute as $8tj43$setAttribute, mergeProps as $8tj43$mergeProps1, isServer as $8tj43$isServer, runHydrationEvents as $8tj43$runHydrationEvents, addEventListener as $8tj43$addEventListener, className as $8tj43$className, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, classList as $8tj43$classList, getNextMarker as $8tj43$getNextMarker, Dynamic as $8tj43$Dynamic, use as $8tj43$use, setProperty as $8tj43$setProperty } from "solid-js/web";
+import { createSignal as $8tj43$createSignal, getOwner as $8tj43$getOwner, createEffect as $8tj43$createEffect, runWithOwner as $8tj43$runWithOwner, onCleanup as $8tj43$onCleanup, createMemo as $8tj43$createMemo, createContext as $8tj43$createContext, useContext as $8tj43$useContext, mergeProps as $8tj43$mergeProps, Show as $8tj43$Show, createResource as $8tj43$createResource, Suspense as $8tj43$Suspense, untrack as $8tj43$untrack, createRenderEffect as $8tj43$createRenderEffect, Index as $8tj43$Index, createRoot as $8tj43$createRoot, For as $8tj43$For, createUniqueId as $8tj43$createUniqueId, createComputed as $8tj43$createComputed, ErrorBoundary as $8tj43$ErrorBoundary, on as $8tj43$on, batch as $8tj43$batch, createReaction as $8tj43$createReaction, mapArray as $8tj43$mapArray } from "solid-js";
 import $8tj43$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
 import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
 import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
@@ -9,7 +9,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.4";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.6";
 const $2855bffe06ef7a03$var$fallback_operator = "in";
 const $2855bffe06ef7a03$var$fallback_token = "";
 const $2855bffe06ef7a03$var$legacy_filter_prefix = "filter_";
@@ -209,7 +209,6 @@ function $801e8845d3fa3653$export$94026ee33dbabc26(props) {
     return _el$;
   })();
 }
-const $56047603f9d212b6$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<img>`);
 function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $8tj43$createSignal(0);
   const resizeObserver = new ResizeObserver($8tj43$catchify(records => {
@@ -237,6 +236,7 @@ function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
   });
   return size;
 }
+const $56047603f9d212b6$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
 function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   // Enable reactive props
   const otherOptions = $8tj43$createMemo(() => {
@@ -259,16 +259,95 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
       srcset: srcset
     };
   });
-  return (() => {
-    const _el$ = $8tj43$getNextElement($56047603f9d212b6$var$_tmpl$);
-    $8tj43$spread(_el$, $8tj43$mergeProps(otherOptions, src_options, {
-      get sizes() {
-        return props.size() + "px";
+  // Work around https://github.com/solidjs/solid/issues/1828
+  const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
+  const [hasSetSize, setHasSetSize] = $8tj43$createSignal(false);
+  const [hasDecoded, setHasDecoded] = $8tj43$createSignal(false);
+  const sizePX = $8tj43$createMemo(() => "".concat(props.size(), "px")); // props.size could be a getter that expects a cleanup so get it in this memo instead of where we set img.sizes
+  const listingContext = $5441862cd2f5e111$export$8d0c4fdbb05a2f2e();
+  // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
+  // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
+  const executeWhenIdleBatched = fn => {
+    if (typeof requestIdleCallback !== "function") setTimeout(fn); // Old browsers don't get optimisation
+    const existingStack = listingContext === null || listingContext === void 0 ? void 0 : listingContext[$56047603f9d212b6$var$onIdleFunctionsSymbol];
+    if (existingStack) return existingStack.add(fn);
+    const newStack = new Set([fn]);
+    if (listingContext) listingContext[$56047603f9d212b6$var$onIdleFunctionsSymbol] = newStack;
+    const processStackWhenIdle = () => requestIdleCallback(deadline => {
+      const start = performance.now();
+      const thirdDeadlineTime = deadline.timeRemaining() / 3; // observers coming after this take up 2-3x the time so don't use all of it
+      for (const fn of newStack) {
+        newStack.delete(fn);
+        fn();
+        const timeTaken = performance.now() - start;
+        if ((!deadline.timeRemaining() || timeTaken > thirdDeadlineTime) && newStack.size) {
+          // There's still work to be done but no time, so schedule another idle callback
+          processStackWhenIdle();
+          return;
+        }
       }
-    }), false, false);
-    $8tj43$runHydrationEvents();
-    return _el$;
-  })();
+      // Stack is empty
+      if (listingContext) delete listingContext[$56047603f9d212b6$var$onIdleFunctionsSymbol];
+    }, {
+      timeout: 15000
+    } // long timeout, better to not have images than to freeze the browser. But also we don't want to confuse user why no iamges are loading
+    );
+
+    processStackWhenIdle();
+  };
+  let sizeSetFastPath = false;
+  let hasDecodedFastPath = false;
+  let timeoutSet = false;
+  let gotCleanedUp = false;
+  $8tj43$onCleanup(() => gotCleanedUp = true);
+  $8tj43$spread(img, $8tj43$mergeProps(otherOptions), false, true);
+  $8tj43$createEffect(() => {
+    if (!props.size()) return; // wait until we have a size
+    if (timeoutSet) return;
+    const handler = $8tj43$catchify(() => {
+      if (gotCleanedUp) return;
+      img.sizes = sizePX(); // use latest available value of props.size
+      if (!sizeSetFastPath) {
+        setHasSetSize(true);
+        sizeSetFastPath = true;
+      }
+      timeoutSet = false;
+    });
+    // Throttle the updating of sizes to avoid unnecessary image re-fetches during resize
+    // And also because we first set src after sizes has been set, wait with loading and decoding images until browser is idle
+    // This greatly improves performance when loading (more) products
+    // See https://depictaiworkspace.slack.com/archives/C05NJ0K3WRL/p1698220617663139
+    executeWhenIdleBatched(handler);
+    timeoutSet = true;
+  });
+  $8tj43$createEffect(() => {
+    if (!props.size() || !hasSetSize()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
+    Object.assign(img, src_options());
+    // Add to DOM once decoded to not require/block any paints before image has completed loading and avoid showing broken image symbol
+    // We can do this because there has to be a container around us giving us a size
+    // No need to listen if we're already in the DOM
+    if (hasDecodedFastPath) return;
+    if (props.loading === "lazy") {
+      // For lazy loading there's no decoding to wait for as it only occurs when the image is visible
+      // Make sure src is set before we put the image into the DOM though so no broken image symbol is shown
+      setHasDecoded(true);
+      hasDecodedFastPath = true;
+    }
+    img.decode().catch(e => $8tj43$dwarn("Failed to decode image", e, img)) // Display the image also if loading failed so webdev can debug and doesn't get "no image"
+    .then(async () => {
+      // Also wait with inserting image (i.e. paint) until browser is idle
+      await new Promise(r => executeWhenIdleBatched(r));
+      if (gotCleanedUp) return;
+      setHasDecoded(true);
+      hasDecodedFastPath = true;
+    });
+  });
+  return $8tj43$createComponent((0, $8tj43$Show), {
+    get when() {
+      return hasDecoded();
+    },
+    children: img
+  });
 }
 function $56047603f9d212b6$var$make_srcset(url, resolutions) {
   return resolutions.map(width => "".concat($56047603f9d212b6$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
@@ -306,7 +385,7 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     $8tj43$queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  container.append($8tj43$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), {
+  $8tj43$insert(container, $8tj43$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), {
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $8tj43$createMemo(() => {
@@ -741,7 +820,7 @@ function $63f1f8dbcd07d3b0$export$d21e32dfedac04be(props) {
   const container_class = "x" + $8tj43$createUniqueId();
   const container_element_ = (() => {
     const _el$ = $8tj43$getNextElement($63f1f8dbcd07d3b0$var$_tmpl$);
-    $8tj43$spread(_el$, $8tj43$mergeProps(() => props.element_attributes, {
+    $8tj43$spread(_el$, $8tj43$mergeProps1(() => props.element_attributes, {
       "classList": {
         [container_class]: true
       }
@@ -904,7 +983,7 @@ function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
       } = slider;
       const Layout = props => $63f1f8dbcd07d3b0$export$445d8d3f5f706a40(props, insert_here, true);
       // Do like this, so we don't have to call mergeProps ourselves
-      $8tj43$createComponent(Layout, $8tj43$mergeProps({
+      $8tj43$createComponent(Layout, $8tj43$mergeProps1({
         rows: "all",
         layout: "slider"
       }, layout_options_));
@@ -1037,7 +1116,7 @@ function $e3efeb558d952696$export$7da560f849543dff(_ref) {
       _el$4 = _el$3.nextSibling,
       [_el$5, _co$2] = $8tj43$getNextMarker(_el$4.nextSibling);
     $8tj43$insert(_el$, (0, $ca55612a53dbbdd2$export$a2cc176055f8f08), _el$3, _co$);
-    $8tj43$insert(_el$, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps({
+    $8tj43$insert(_el$, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps1({
       get rows() {
         return rows_object_();
       },
@@ -1441,7 +1520,7 @@ function $9783d437ad61594c$export$3b621d86b1566b2() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (() => {
     const _el$ = $8tj43$getNextElement($9783d437ad61594c$var$_tmpl$);
-    $8tj43$spread(_el$, $8tj43$mergeProps(props, {
+    $8tj43$spread(_el$, $8tj43$mergeProps1(props, {
       "xmlns": "http://www.w3.org/2000/svg",
       "width": "21.064",
       "height": "21.047",
@@ -1840,7 +1919,7 @@ const $ff3225aef892a467$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<svg><path d=
 function $ff3225aef892a467$export$f21ab0717a89c77f(props) {
   return (() => {
     const _el$ = $8tj43$getNextElement($ff3225aef892a467$var$_tmpl$);
-    $8tj43$spread(_el$, $8tj43$mergeProps(props, {
+    $8tj43$spread(_el$, $8tj43$mergeProps1(props, {
       "xmlns": "http://www.w3.org/2000/svg",
       "width": "11",
       "height": "12"
@@ -3065,7 +3144,7 @@ const $830ea8efda59884e$export$414f6a19d38e655c = _ref => {
               [_el$6, _co$] = $8tj43$getNextMarker(_el$5.nextSibling),
               _el$7 = _el$6.nextSibling,
               [_el$8, _co$2] = $8tj43$getNextMarker(_el$7.nextSibling);
-            $8tj43$spread(_el$2, $8tj43$mergeProps(attributes, {
+            $8tj43$spread(_el$2, $8tj43$mergeProps1(attributes, {
               get disabled() {
                 return $8tj43$memo(() => value().count_ === 0)() && !is_selected();
               },
@@ -4984,7 +5063,7 @@ function $64d94dcaa058dc7b$export$ab6b147eec64fea5(props) {
   const container_class = "x" + $8tj43$createUniqueId();
   const container_element_ = (() => {
     const _el$ = $8tj43$getNextElement($64d94dcaa058dc7b$var$_tmpl$);
-    $8tj43$spread(_el$, $8tj43$mergeProps(() => props.element_attributes, {
+    $8tj43$spread(_el$, $8tj43$mergeProps1(() => props.element_attributes, {
       "classList": {
         [container_class]: true
       }
@@ -5310,7 +5389,7 @@ function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_s
         return _el$;
       }
     });
-    return $8tj43$mergeProps1(block, {
+    return $8tj43$mergeProps(block, {
       // Create content divs for the blocks with as much fine-grained diffing as possible?
       content: () => {
         // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
@@ -6029,7 +6108,7 @@ function $082c4ed3e22f8d71$export$9bf11afa910f536e(_ref) {
           get children() {
             return (() => {
               const _el$34 = $8tj43$getNextElement($082c4ed3e22f8d71$var$_tmpl$5);
-              $8tj43$insert(_el$34, $8tj43$createComponent((0, $f6b0500577e1b210$export$3f1a388cc0d8fed7), $8tj43$mergeProps(args_for_filtering_, {
+              $8tj43$insert(_el$34, $8tj43$createComponent((0, $f6b0500577e1b210$export$3f1a388cc0d8fed7), $8tj43$mergeProps1(args_for_filtering_, {
                 are_in_modal_: true
               })));
               return _el$34;
@@ -8469,7 +8548,7 @@ function $ef0f18a578b32578$export$82eafebb825fc23f() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (() => {
     const _el$ = $8tj43$getNextElement($ef0f18a578b32578$var$_tmpl$);
-    $8tj43$spread(_el$, $8tj43$mergeProps(props, {
+    $8tj43$spread(_el$, $8tj43$mergeProps1(props, {
       "xmlns": "http://www.w3.org/2000/svg",
       "width": "20",
       "height": "22"
@@ -8652,7 +8731,7 @@ function $8ef6232475d44150$export$7de92c4c2205ebf3(_ref) {
       [_el$6, _co$2] = $8tj43$getNextMarker(_el$5.nextSibling);
     $8tj43$insert(_el$2, () => i18n_.search_recs_title_());
     $8tj43$insert(_el$, (0, $ca55612a53dbbdd2$export$a2cc176055f8f08), _el$4, _co$);
-    $8tj43$insert(_el$, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps({
+    $8tj43$insert(_el$, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps1({
       rows: rows_object,
       layout: "grid",
       element_attributes: {
@@ -10688,7 +10767,7 @@ function $22470de5f42cc35d$export$f631859cab12b342(_ref) {
       [_el$8, _co$] = $8tj43$getNextMarker(_el$7.nextSibling),
       _el$9 = _el$8.nextSibling,
       [_el$10, _co$2] = $8tj43$getNextMarker(_el$9.nextSibling);
-    $8tj43$insert(_el$4, $8tj43$createComponent(LinkIfPossible, $8tj43$mergeProps(make_link_attributes, {
+    $8tj43$insert(_el$4, $8tj43$createComponent(LinkIfPossible, $8tj43$mergeProps1(make_link_attributes, {
       tabIndex: "-1",
       get children() {
         return $8tj43$createComponent((0, $3c5e15c6ee4227a9$export$605674723bcc715c), {
@@ -10697,7 +10776,7 @@ function $22470de5f42cc35d$export$f631859cab12b342(_ref) {
         });
       }
     })));
-    $8tj43$insert(_el$5, $8tj43$createComponent(LinkIfPossible, $8tj43$mergeProps({
+    $8tj43$insert(_el$5, $8tj43$createComponent(LinkIfPossible, $8tj43$mergeProps1({
       "class": "content-title line-clamp"
     }, make_link_attributes, {
       get title() {
@@ -10859,7 +10938,7 @@ function $d53ebed6f63304e4$export$6d0c9c22f6652669(_ref) {
       },
       number_of_results_: num_results
     }), _el$3, _co$);
-    $8tj43$insert(_el$, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps({
+    $8tj43$insert(_el$, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps1({
       layout: "grid",
       element_attributes: {
         class: "cards"
@@ -11040,7 +11119,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
     var _search_results_4, _search_results_4$con;
     return ((_search_results_4 = search_results_()) !== null && _search_results_4 !== void 0 && (_search_results_4$con = _search_results_4.content_search_links) !== null && _search_results_4$con !== void 0 && _search_results_4$con.length ? i18n_.no_products_ : i18n_.no_results_text_)();
   });
-  const results_for = $8tj43$createComponent((0, $69602b3d8fd54c38$export$9dd50d35b9d94fdf), $8tj43$mergeProps({
+  const results_for = $8tj43$createComponent((0, $69602b3d8fd54c38$export$9dd50d35b9d94fdf), $8tj43$mergeProps1({
     get type() {
       return (0, $69602b3d8fd54c38$export$2452208c79fe93ea).products;
     },

package/latest/index.cjs

@@ -70,7 +70,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.4";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.6";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -265,7 +265,6 @@ function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
     return _el$;
   })();
 }
-const $19950faaac026e09$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<img>`);
 function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $gVhhF$solidjs.createSignal(0);
   const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => {
@@ -290,6 +289,7 @@ function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
   });
   return size;
 }
+const $19950faaac026e09$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
 function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   // Enable reactive props
   const otherOptions = $gVhhF$solidjs.createMemo(() => {
@@ -312,16 +312,95 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
       srcset: srcset
     };
   });
-  return (() => {
-    const _el$ = $gVhhF$solidjsweb.getNextElement($19950faaac026e09$var$_tmpl$);
-    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(otherOptions, src_options, {
-      get sizes() {
-        return props.size() + "px";
+  // Work around https://github.com/solidjs/solid/issues/1828
+  const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
+  const [hasSetSize, setHasSetSize] = $gVhhF$solidjs.createSignal(false);
+  const [hasDecoded, setHasDecoded] = $gVhhF$solidjs.createSignal(false);
+  const sizePX = $gVhhF$solidjs.createMemo(() => `${props.size()}px`); // props.size could be a getter that expects a cleanup so get it in this memo instead of where we set img.sizes
+  const listingContext = $84798aaa863a4909$export$8d0c4fdbb05a2f2e();
+  // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
+  // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
+  const executeWhenIdleBatched = fn => {
+    if (typeof requestIdleCallback !== "function") setTimeout(fn); // Old browsers don't get optimisation
+    const existingStack = listingContext?.[$19950faaac026e09$var$onIdleFunctionsSymbol];
+    if (existingStack) return existingStack.add(fn);
+    const newStack = new Set([fn]);
+    if (listingContext) listingContext[$19950faaac026e09$var$onIdleFunctionsSymbol] = newStack;
+    const processStackWhenIdle = () => requestIdleCallback(deadline => {
+      const start = performance.now();
+      const thirdDeadlineTime = deadline.timeRemaining() / 3; // observers coming after this take up 2-3x the time so don't use all of it
+      for (const fn of newStack) {
+        newStack.delete(fn);
+        fn();
+        const timeTaken = performance.now() - start;
+        if ((!deadline.timeRemaining() || timeTaken > thirdDeadlineTime) && newStack.size) {
+          // There's still work to be done but no time, so schedule another idle callback
+          processStackWhenIdle();
+          return;
+        }
       }
-    }), false, false);
-    $gVhhF$solidjsweb.runHydrationEvents();
-    return _el$;
-  })();
+      // Stack is empty
+      if (listingContext) delete listingContext[$19950faaac026e09$var$onIdleFunctionsSymbol];
+    }, {
+      timeout: 15000
+    } // long timeout, better to not have images than to freeze the browser. But also we don't want to confuse user why no iamges are loading
+    );
+
+    processStackWhenIdle();
+  };
+  let sizeSetFastPath = false;
+  let hasDecodedFastPath = false;
+  let timeoutSet = false;
+  let gotCleanedUp = false;
+  $gVhhF$solidjs.onCleanup(() => gotCleanedUp = true);
+  $gVhhF$solidjsweb.spread(img, $gVhhF$solidjs.mergeProps(otherOptions), false, true);
+  $gVhhF$solidjs.createEffect(() => {
+    if (!props.size()) return; // wait until we have a size
+    if (timeoutSet) return;
+    const handler = $gVhhF$depictaiutilishared.catchify(() => {
+      if (gotCleanedUp) return;
+      img.sizes = sizePX(); // use latest available value of props.size
+      if (!sizeSetFastPath) {
+        setHasSetSize(true);
+        sizeSetFastPath = true;
+      }
+      timeoutSet = false;
+    });
+    // Throttle the updating of sizes to avoid unnecessary image re-fetches during resize
+    // And also because we first set src after sizes has been set, wait with loading and decoding images until browser is idle
+    // This greatly improves performance when loading (more) products
+    // See https://depictaiworkspace.slack.com/archives/C05NJ0K3WRL/p1698220617663139
+    executeWhenIdleBatched(handler);
+    timeoutSet = true;
+  });
+  $gVhhF$solidjs.createEffect(() => {
+    if (!props.size() || !hasSetSize()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
+    Object.assign(img, src_options());
+    // Add to DOM once decoded to not require/block any paints before image has completed loading and avoid showing broken image symbol
+    // We can do this because there has to be a container around us giving us a size
+    // No need to listen if we're already in the DOM
+    if (hasDecodedFastPath) return;
+    if (props.loading === "lazy") {
+      // For lazy loading there's no decoding to wait for as it only occurs when the image is visible
+      // Make sure src is set before we put the image into the DOM though so no broken image symbol is shown
+      setHasDecoded(true);
+      hasDecodedFastPath = true;
+    }
+    img.decode().catch(e => $gVhhF$depictaiutilishared.dwarn("Failed to decode image", e, img)) // Display the image also if loading failed so webdev can debug and doesn't get "no image"
+    .then(async () => {
+      // Also wait with inserting image (i.e. paint) until browser is idle
+      await new Promise(r => executeWhenIdleBatched(r));
+      if (gotCleanedUp) return;
+      setHasDecoded(true);
+      hasDecodedFastPath = true;
+    });
+  });
+  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    get when() {
+      return hasDecoded();
+    },
+    children: img
+  });
 }
 function $19950faaac026e09$var$make_srcset(url, resolutions) {
   return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
@@ -359,7 +438,7 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
     $gVhhF$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  container.append($gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), {
+  $gVhhF$solidjsweb.insert(container, $gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), {
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $gVhhF$solidjs.createMemo(() => currentImageSize()?.() || 0);

package/latest/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.4";
+export const version = "2.1.6";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -152,17 +152,19 @@ export function ImageContainer(props: {
 export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 /**
  * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
+ * Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
  * This is used for our responsive images:
  * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
  * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
  * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
+ * You need to use insert(domNode, <ShopifyResponsiveImg size={sizeAccessor} src={src} />) if you want to insert the return value of this component into a DOM element manually, where you `import { insert } from "solid-js/web";` because we first want to insert the image once it has loaded.
  */
 export function ShopifyResponsiveImg(props: {
   resolutions?: number[];
   size: Accessor<number>;
 } & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
   src: string;
-}): HTMLImageElement;
+}): JSX.Element;
 export const shopifyContainedImageContextSymbol: unique symbol;
 /**
  * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.