@depict-ai/ui 4.0.8 → 4.0.9

package/ES10/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.8";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.9";
 function $a28000bc10de28ad$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $52FdA$solidjs.createSignal();
   const deparallelizedFetcher = $52FdA$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -2594,18 +2594,6 @@ const $858fdcf73148519f$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleF
 const $858fdcf73148519f$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 const $858fdcf73148519f$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
-  // Enable reactive props
-  const otherOptions = $52FdA$solidjs.createMemo(() => {
-    const cloned_props = {
-      ...props
-    };
-    delete cloned_props.resolutions;
-    // @ts-ignore
-    delete cloned_props.size;
-    // @ts-ignore
-    delete cloned_props.src;
-    return cloned_props;
-  });
   const src_options = $52FdA$solidjs.createMemo(() => {
     const fallback_src = $858fdcf73148519f$var$generateImageUrl(props.src, 400);
     const srcset = $858fdcf73148519f$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
@@ -2617,19 +2605,25 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   });
   // 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 [, otherAttributes] = $52FdA$solidjs.splitProps(props, ["resolutions", "size", "src", "srcSet", "loading"]);
   const [hasSetSize, setHasSetSize] = $52FdA$solidjs.createSignal(false);
   const [hasDecoded, setHasDecoded] = $52FdA$solidjs.createSignal(false);
   const productCardIndexAccessor = $b54645378dfc7280$export$e3faf4d95300054f();
   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();
   const isPrioritisedImage = $52FdA$solidjs.createMemo(() => (productCardIndexAccessor === null || productCardIndexAccessor === void 0 ? void 0 : productCardIndexAccessor()) < 8);
-  const loadLazily = $52FdA$solidjs.createMemo(() => {
+  const shouldActuallyEnableLazyLoading = $52FdA$solidjs.createMemo(() => {
     const {
       loading: loading
     } = props;
     if (loading === "force-lazy") return true;
     return loading === "lazy" && !isPrioritisedImage();
   });
+  const modifiedOtherAttributes = $52FdA$solidjs.mergeProps(otherAttributes, {
+    get loading() {
+      return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
+    }
+  });
   // 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 => {
@@ -2692,7 +2686,7 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
     $52FdA$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $52FdA$solidjs.onCleanup(() => gotCleanedUp = true);
-  $52FdA$solidjsweb.spread(img, $52FdA$solidjs.mergeProps(otherOptions), false, true);
+  $52FdA$solidjsweb.spread(img, $52FdA$solidjs.mergeProps(modifiedOtherAttributes), false, true);
   $52FdA$solidjs.createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -2719,7 +2713,7 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
     // 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 (loadLazily()) {
+    if (shouldActuallyEnableLazyLoading()) {
       // 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);

package/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.8";
+export const version = "4.0.9";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;

package/ES10/index.js

@@ -1,5 +1,5 @@
 import { add_to_version_info as $8tj43$add_to_version_info, deparallelize_no_drop as $8tj43$deparallelize_no_drop, catchify as $8tj43$catchify, make_random_classname as $8tj43$make_random_classname, ContainedImage as $8tj43$ContainedImage, standard_price_format as $8tj43$standard_price_format, javascript_media_query as $8tj43$javascript_media_query, dlog as $8tj43$dlog, camelCasifyObject as $8tj43$camelCasifyObject, buildThresholdList as $8tj43$buildThresholdList, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, observer as $8tj43$observer, report as $8tj43$report, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, queueMacroTask as $8tj43$queueMacroTask, findMostFrequentItem as $8tj43$findMostFrequentItem, dwarn as $8tj43$dwarn, slider_fading_factory as $8tj43$slider_fading_factory, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, 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, use_href_accessor as $8tj43$use_href_accessor, get_session_id as $8tj43$get_session_id, add_version_query_params as $8tj43$add_version_query_params, base_url as $8tj43$base_url, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, slider_fractional_factory as $8tj43$slider_fractional_factory, useExpandingContainer as $8tj43$useExpandingContainer, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, snakeCasifyObject as $8tj43$snakeCasifyObject, fetch_retry as $8tj43$fetch_retry, make_url_with_query_params as $8tj43$make_url_with_query_params, sort_obj as $8tj43$sort_obj, is_debug as $8tj43$is_debug, ListenableSet as $8tj43$ListenableSet1, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { createSignal as $8tj43$createSignal, createResource as $8tj43$createResource, createEffect as $8tj43$createEffect, untrack as $8tj43$untrack, createMemo as $8tj43$createMemo, onCleanup as $8tj43$onCleanup, Show as $8tj43$Show, createComputed as $8tj43$createComputed, For as $8tj43$For, getOwner as $8tj43$getOwner, runWithOwner as $8tj43$runWithOwner, createContext as $8tj43$createContext, useContext as $8tj43$useContext, on as $8tj43$on, Index as $8tj43$Index, batch as $8tj43$batch, ErrorBoundary as $8tj43$ErrorBoundary, mergeProps as $8tj43$mergeProps1, createUniqueId as $8tj43$createUniqueId, createRenderEffect as $8tj43$createRenderEffect, createSelector as $8tj43$createSelector, children as $8tj43$children, splitProps as $8tj43$splitProps, createRoot as $8tj43$createRoot, Suspense as $8tj43$Suspense, createReaction as $8tj43$createReaction, mapArray as $8tj43$mapArray } from "solid-js";
+import { createSignal as $8tj43$createSignal, createResource as $8tj43$createResource, createEffect as $8tj43$createEffect, untrack as $8tj43$untrack, createMemo as $8tj43$createMemo, onCleanup as $8tj43$onCleanup, Show as $8tj43$Show, createComputed as $8tj43$createComputed, For as $8tj43$For, getOwner as $8tj43$getOwner, runWithOwner as $8tj43$runWithOwner, createContext as $8tj43$createContext, useContext as $8tj43$useContext, on as $8tj43$on, Index as $8tj43$Index, batch as $8tj43$batch, ErrorBoundary as $8tj43$ErrorBoundary, splitProps as $8tj43$splitProps, mergeProps as $8tj43$mergeProps1, createUniqueId as $8tj43$createUniqueId, createRenderEffect as $8tj43$createRenderEffect, createSelector as $8tj43$createSelector, children as $8tj43$children, createRoot as $8tj43$createRoot, Suspense as $8tj43$Suspense, createReaction as $8tj43$createReaction, mapArray as $8tj43$mapArray } from "solid-js";
 import { template as $8tj43$template, getNextElement as $8tj43$getNextElement, addEventListener as $8tj43$addEventListener, insert as $8tj43$insert, memo as $8tj43$memo, runHydrationEvents as $8tj43$runHydrationEvents, createComponent as $8tj43$createComponent, getNextMarker as $8tj43$getNextMarker, use as $8tj43$use, effect as $8tj43$effect, classList as $8tj43$classList, setAttribute as $8tj43$setAttribute, delegateEvents as $8tj43$delegateEvents, style as $8tj43$style, className as $8tj43$className, spread as $8tj43$spread, mergeProps as $8tj43$mergeProps, setProperty as $8tj43$setProperty, isServer as $8tj43$isServer, Dynamic as $8tj43$Dynamic } from "solid-js/web";
 import { ListenableSet as $8tj43$ListenableSet, catchify as $8tj43$catchify1, use_href_accessor as $8tj43$use_href_accessor1, report as $8tj43$report1 } from "@depict-ai/utilishared/ES10";
 import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
@@ -10,7 +10,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 = "4.0.8";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.9";
 function $a604a8ffa4e4c03f$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $8tj43$createSignal();
   const deparallelizedFetcher = $8tj43$deparallelize_no_drop(async dependencyValue => {
@@ -2510,18 +2510,6 @@ const $56047603f9d212b6$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleF
 const $56047603f9d212b6$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 const $56047603f9d212b6$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
-  // Enable reactive props
-  const otherOptions = $8tj43$createMemo(() => {
-    const cloned_props = {
-      ...props
-    };
-    delete cloned_props.resolutions;
-    // @ts-ignore
-    delete cloned_props.size;
-    // @ts-ignore
-    delete cloned_props.src;
-    return cloned_props;
-  });
   const src_options = $8tj43$createMemo(() => {
     const fallback_src = $56047603f9d212b6$var$generateImageUrl(props.src, 400);
     const srcset = $56047603f9d212b6$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
@@ -2533,19 +2521,25 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   });
   // 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 [, otherAttributes] = $8tj43$splitProps(props, ["resolutions", "size", "src", "srcSet", "loading"]);
   const [hasSetSize, setHasSetSize] = $8tj43$createSignal(false);
   const [hasDecoded, setHasDecoded] = $8tj43$createSignal(false);
   const productCardIndexAccessor = $1e69163caedaab4e$export$e3faf4d95300054f();
   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();
   const isPrioritisedImage = $8tj43$createMemo(() => (productCardIndexAccessor === null || productCardIndexAccessor === void 0 ? void 0 : productCardIndexAccessor()) < 8);
-  const loadLazily = $8tj43$createMemo(() => {
+  const shouldActuallyEnableLazyLoading = $8tj43$createMemo(() => {
     const {
       loading: loading
     } = props;
     if (loading === "force-lazy") return true;
     return loading === "lazy" && !isPrioritisedImage();
   });
+  const modifiedOtherAttributes = $8tj43$mergeProps1(otherAttributes, {
+    get loading() {
+      return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
+    }
+  });
   // 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 => {
@@ -2608,7 +2602,7 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     $8tj43$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $8tj43$onCleanup(() => gotCleanedUp = true);
-  $8tj43$spread(img, $8tj43$mergeProps1(otherOptions), false, true);
+  $8tj43$spread(img, $8tj43$mergeProps1(modifiedOtherAttributes), false, true);
   $8tj43$createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -2635,7 +2629,7 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     // 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 (loadLazily()) {
+    if (shouldActuallyEnableLazyLoading()) {
       // 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);

package/latest/index.cjs

@@ -88,7 +88,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.8";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.9";
 function $53df95e470b2f8d2$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $gVhhF$solidjs.createSignal();
   const deparallelizedFetcher = $gVhhF$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -2483,18 +2483,6 @@ const $19950faaac026e09$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleF
 const $19950faaac026e09$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 const $19950faaac026e09$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $19950faaac026e09$export$6e5611bc7e57e477(props) {
-  // Enable reactive props
-  const otherOptions = $gVhhF$solidjs.createMemo(() => {
-    const cloned_props = {
-      ...props
-    };
-    delete cloned_props.resolutions;
-    // @ts-ignore
-    delete cloned_props.size;
-    // @ts-ignore
-    delete cloned_props.src;
-    return cloned_props;
-  });
   const src_options = $gVhhF$solidjs.createMemo(() => {
     const fallback_src = $19950faaac026e09$var$generateImageUrl(props.src, 400);
     const srcset = $19950faaac026e09$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
@@ -2506,19 +2494,25 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   });
   // 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 [, otherAttributes] = $gVhhF$solidjs.splitProps(props, ["resolutions", "size", "src", "srcSet", "loading"]);
   const [hasSetSize, setHasSetSize] = $gVhhF$solidjs.createSignal(false);
   const [hasDecoded, setHasDecoded] = $gVhhF$solidjs.createSignal(false);
   const productCardIndexAccessor = $129b9b9c010039d0$export$e3faf4d95300054f();
   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();
   const isPrioritisedImage = $gVhhF$solidjs.createMemo(() => productCardIndexAccessor?.() < 8);
-  const loadLazily = $gVhhF$solidjs.createMemo(() => {
+  const shouldActuallyEnableLazyLoading = $gVhhF$solidjs.createMemo(() => {
     const {
       loading: loading
     } = props;
     if (loading === "force-lazy") return true;
     return loading === "lazy" && !isPrioritisedImage();
   });
+  const modifiedOtherAttributes = $gVhhF$solidjs.mergeProps(otherAttributes, {
+    get loading() {
+      return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
+    }
+  });
   // 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 => {
@@ -2578,7 +2572,7 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
     $gVhhF$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $gVhhF$solidjs.onCleanup(() => gotCleanedUp = true);
-  $gVhhF$solidjsweb.spread(img, $gVhhF$solidjs.mergeProps(otherOptions), false, true);
+  $gVhhF$solidjsweb.spread(img, $gVhhF$solidjs.mergeProps(modifiedOtherAttributes), false, true);
   $gVhhF$solidjs.createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -2605,7 +2599,7 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
     // 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 (loadLazily()) {
+    if (shouldActuallyEnableLazyLoading()) {
       // 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);

package/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.8";
+export const version = "4.0.9";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;

package/latest/index.js

@@ -1,5 +1,5 @@
 import { add_to_version_info as $9HbP8$add_to_version_info, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, catchify as $9HbP8$catchify, make_random_classname as $9HbP8$make_random_classname, ContainedImage as $9HbP8$ContainedImage, standard_price_format as $9HbP8$standard_price_format, javascript_media_query as $9HbP8$javascript_media_query, dlog as $9HbP8$dlog, camelCasifyObject as $9HbP8$camelCasifyObject, buildThresholdList as $9HbP8$buildThresholdList, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, observer as $9HbP8$observer, report as $9HbP8$report, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, findMostFrequentItem as $9HbP8$findMostFrequentItem, dwarn as $9HbP8$dwarn, slider_fading_factory as $9HbP8$slider_fading_factory, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, use_href_accessor as $9HbP8$use_href_accessor, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, base_url as $9HbP8$base_url, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, slider_fractional_factory as $9HbP8$slider_fractional_factory, useExpandingContainer as $9HbP8$useExpandingContainer, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, fetch_retry as $9HbP8$fetch_retry, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, is_debug as $9HbP8$is_debug, ListenableSet as $9HbP8$ListenableSet1, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { createSignal as $9HbP8$createSignal, createResource as $9HbP8$createResource, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, createMemo as $9HbP8$createMemo, onCleanup as $9HbP8$onCleanup, Show as $9HbP8$Show, createComputed as $9HbP8$createComputed, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, on as $9HbP8$on, Index as $9HbP8$Index, batch as $9HbP8$batch, ErrorBoundary as $9HbP8$ErrorBoundary, mergeProps as $9HbP8$mergeProps1, createUniqueId as $9HbP8$createUniqueId, createRenderEffect as $9HbP8$createRenderEffect, createSelector as $9HbP8$createSelector, children as $9HbP8$children, splitProps as $9HbP8$splitProps, createRoot as $9HbP8$createRoot, Suspense as $9HbP8$Suspense, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
+import { createSignal as $9HbP8$createSignal, createResource as $9HbP8$createResource, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, createMemo as $9HbP8$createMemo, onCleanup as $9HbP8$onCleanup, Show as $9HbP8$Show, createComputed as $9HbP8$createComputed, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, on as $9HbP8$on, Index as $9HbP8$Index, batch as $9HbP8$batch, ErrorBoundary as $9HbP8$ErrorBoundary, splitProps as $9HbP8$splitProps, mergeProps as $9HbP8$mergeProps1, createUniqueId as $9HbP8$createUniqueId, createRenderEffect as $9HbP8$createRenderEffect, createSelector as $9HbP8$createSelector, children as $9HbP8$children, createRoot as $9HbP8$createRoot, Suspense as $9HbP8$Suspense, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
 import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, addEventListener as $9HbP8$addEventListener, insert as $9HbP8$insert, memo as $9HbP8$memo, runHydrationEvents as $9HbP8$runHydrationEvents, createComponent as $9HbP8$createComponent, getNextMarker as $9HbP8$getNextMarker, use as $9HbP8$use, effect as $9HbP8$effect, classList as $9HbP8$classList, setAttribute as $9HbP8$setAttribute, delegateEvents as $9HbP8$delegateEvents, style as $9HbP8$style, className as $9HbP8$className, spread as $9HbP8$spread, mergeProps as $9HbP8$mergeProps, setProperty as $9HbP8$setProperty, isServer as $9HbP8$isServer, Dynamic as $9HbP8$Dynamic } from "solid-js/web";
 import { ListenableSet as $9HbP8$ListenableSet, catchify as $9HbP8$catchify1, use_href_accessor as $9HbP8$use_href_accessor1, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
 import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from "solid-js/store";
@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.8";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.9";
 function $136f1d4d6c7ba6ac$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $9HbP8$createSignal();
   const deparallelizedFetcher = $9HbP8$deparallelize_no_drop(async dependencyValue => {
@@ -2402,18 +2402,6 @@ const $e8ffe11ed01df0fe$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleF
 const $e8ffe11ed01df0fe$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 const $e8ffe11ed01df0fe$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
-  // Enable reactive props
-  const otherOptions = $9HbP8$createMemo(() => {
-    const cloned_props = {
-      ...props
-    };
-    delete cloned_props.resolutions;
-    // @ts-ignore
-    delete cloned_props.size;
-    // @ts-ignore
-    delete cloned_props.src;
-    return cloned_props;
-  });
   const src_options = $9HbP8$createMemo(() => {
     const fallback_src = $e8ffe11ed01df0fe$var$generateImageUrl(props.src, 400);
     const srcset = $e8ffe11ed01df0fe$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
@@ -2425,19 +2413,25 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   });
   // 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 [, otherAttributes] = $9HbP8$splitProps(props, ["resolutions", "size", "src", "srcSet", "loading"]);
   const [hasSetSize, setHasSetSize] = $9HbP8$createSignal(false);
   const [hasDecoded, setHasDecoded] = $9HbP8$createSignal(false);
   const productCardIndexAccessor = $b6440e72ed83671a$export$e3faf4d95300054f();
   const sizePX = $9HbP8$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 = $011607bdf658f807$export$8d0c4fdbb05a2f2e();
   const isPrioritisedImage = $9HbP8$createMemo(() => productCardIndexAccessor?.() < 8);
-  const loadLazily = $9HbP8$createMemo(() => {
+  const shouldActuallyEnableLazyLoading = $9HbP8$createMemo(() => {
     const {
       loading: loading
     } = props;
     if (loading === "force-lazy") return true;
     return loading === "lazy" && !isPrioritisedImage();
   });
+  const modifiedOtherAttributes = $9HbP8$mergeProps1(otherAttributes, {
+    get loading() {
+      return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
+    }
+  });
   // 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 => {
@@ -2497,7 +2491,7 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     $9HbP8$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $9HbP8$onCleanup(() => gotCleanedUp = true);
-  $9HbP8$spread(img, $9HbP8$mergeProps1(otherOptions), false, true);
+  $9HbP8$spread(img, $9HbP8$mergeProps1(modifiedOtherAttributes), false, true);
   $9HbP8$createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -2524,7 +2518,7 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     // 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 (loadLazily()) {
+    if (shouldActuallyEnableLazyLoading()) {
       // 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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",

package/server/ES10/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.8";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.9";
 function $a28000bc10de28ad$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $3hooq$solidjs.createSignal();
   const deparallelizedFetcher = $3hooq$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -2021,18 +2021,6 @@ const $858fdcf73148519f$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleF
 const $858fdcf73148519f$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 const $858fdcf73148519f$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
-  // Enable reactive props
-  const otherOptions = $3hooq$solidjs.createMemo(() => {
-    const cloned_props = {
-      ...props
-    };
-    delete cloned_props.resolutions;
-    // @ts-ignore
-    delete cloned_props.size;
-    // @ts-ignore
-    delete cloned_props.src;
-    return cloned_props;
-  });
   const src_options = $3hooq$solidjs.createMemo(() => {
     const fallback_src = $858fdcf73148519f$var$generateImageUrl(props.src, 400);
     const srcset = $858fdcf73148519f$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
@@ -2044,19 +2032,25 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   });
   // 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 [, otherAttributes] = $3hooq$solidjs.splitProps(props, ["resolutions", "size", "src", "srcSet", "loading"]);
   const [hasSetSize, setHasSetSize] = $3hooq$solidjs.createSignal(false);
   const [hasDecoded, setHasDecoded] = $3hooq$solidjs.createSignal(false);
   const productCardIndexAccessor = $b54645378dfc7280$export$e3faf4d95300054f();
   const sizePX = $3hooq$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();
   const isPrioritisedImage = $3hooq$solidjs.createMemo(() => (productCardIndexAccessor === null || productCardIndexAccessor === void 0 ? void 0 : productCardIndexAccessor()) < 8);
-  const loadLazily = $3hooq$solidjs.createMemo(() => {
+  const shouldActuallyEnableLazyLoading = $3hooq$solidjs.createMemo(() => {
     const {
       loading: loading
     } = props;
     if (loading === "force-lazy") return true;
     return loading === "lazy" && !isPrioritisedImage();
   });
+  const modifiedOtherAttributes = $3hooq$solidjs.mergeProps(otherAttributes, {
+    get loading() {
+      return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
+    }
+  });
   // 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 => {
@@ -2119,7 +2113,7 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
     $3hooq$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $3hooq$solidjs.onCleanup(() => gotCleanedUp = true);
-  $3hooq$solidjsweb.spread(img, $3hooq$solidjs.mergeProps(otherOptions), false, true);
+  $3hooq$solidjsweb.spread(img, $3hooq$solidjs.mergeProps(modifiedOtherAttributes), false, true);
   $3hooq$solidjs.createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -2146,7 +2140,7 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
     // 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 (loadLazily()) {
+    if (shouldActuallyEnableLazyLoading()) {
       // 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);

package/server/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.8";
+export const version = "4.0.9";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;

package/server/ES10/index.js

@@ -1,5 +1,5 @@
 import { add_to_version_info as $b8hua$add_to_version_info, deparallelize_no_drop as $b8hua$deparallelize_no_drop, catchify as $b8hua$catchify, make_random_classname as $b8hua$make_random_classname, ContainedImage as $b8hua$ContainedImage, standard_price_format as $b8hua$standard_price_format, javascript_media_query as $b8hua$javascript_media_query, dlog as $b8hua$dlog, camelCasifyObject as $b8hua$camelCasifyObject, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, observer as $b8hua$observer, report as $b8hua$report, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, queueMacroTask as $b8hua$queueMacroTask, findMostFrequentItem as $b8hua$findMostFrequentItem, dwarn as $b8hua$dwarn, slider_fading_factory as $b8hua$slider_fading_factory, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, n_col_styling_with_dist as $b8hua$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $b8hua$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $b8hua$layout_get_total_rec_amount_for_row, layout_media_query_header as $b8hua$layout_media_query_header, use_href_accessor as $b8hua$use_href_accessor, get_session_id as $b8hua$get_session_id, add_version_query_params as $b8hua$add_version_query_params, base_url as $b8hua$base_url, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, slider_fractional_factory as $b8hua$slider_fractional_factory, useExpandingContainer as $b8hua$useExpandingContainer, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, snakeCasifyObject as $b8hua$snakeCasifyObject, fetch_retry as $b8hua$fetch_retry, make_url_with_query_params as $b8hua$make_url_with_query_params, sort_obj as $b8hua$sort_obj, ListenableSet as $b8hua$ListenableSet1, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { createSignal as $b8hua$createSignal, createResource as $b8hua$createResource, createEffect as $b8hua$createEffect, untrack as $b8hua$untrack, createMemo as $b8hua$createMemo, onCleanup as $b8hua$onCleanup, Show as $b8hua$Show, createComputed as $b8hua$createComputed, For as $b8hua$For, getOwner as $b8hua$getOwner, runWithOwner as $b8hua$runWithOwner, createContext as $b8hua$createContext, useContext as $b8hua$useContext, on as $b8hua$on, Index as $b8hua$Index, batch as $b8hua$batch, ErrorBoundary as $b8hua$ErrorBoundary, mergeProps as $b8hua$mergeProps1, createUniqueId as $b8hua$createUniqueId, createRenderEffect as $b8hua$createRenderEffect, createSelector as $b8hua$createSelector, children as $b8hua$children, splitProps as $b8hua$splitProps, createRoot as $b8hua$createRoot, Suspense as $b8hua$Suspense, createReaction as $b8hua$createReaction, mapArray as $b8hua$mapArray } from "solid-js";
+import { createSignal as $b8hua$createSignal, createResource as $b8hua$createResource, createEffect as $b8hua$createEffect, untrack as $b8hua$untrack, createMemo as $b8hua$createMemo, onCleanup as $b8hua$onCleanup, Show as $b8hua$Show, createComputed as $b8hua$createComputed, For as $b8hua$For, getOwner as $b8hua$getOwner, runWithOwner as $b8hua$runWithOwner, createContext as $b8hua$createContext, useContext as $b8hua$useContext, on as $b8hua$on, Index as $b8hua$Index, batch as $b8hua$batch, ErrorBoundary as $b8hua$ErrorBoundary, splitProps as $b8hua$splitProps, mergeProps as $b8hua$mergeProps1, createUniqueId as $b8hua$createUniqueId, createRenderEffect as $b8hua$createRenderEffect, createSelector as $b8hua$createSelector, children as $b8hua$children, createRoot as $b8hua$createRoot, Suspense as $b8hua$Suspense, createReaction as $b8hua$createReaction, mapArray as $b8hua$mapArray } from "solid-js";
 import { ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, escape as $b8hua$escape, createComponent as $b8hua$createComponent, ssrAttribute as $b8hua$ssrAttribute, ssrClassList as $b8hua$ssrClassList, ssrStyle as $b8hua$ssrStyle, ssrElement as $b8hua$ssrElement, mergeProps as $b8hua$mergeProps, insert as $b8hua$insert, spread as $b8hua$spread, isServer as $b8hua$isServer, Dynamic as $b8hua$Dynamic } from "solid-js/web";
 import { ListenableSet as $b8hua$ListenableSet, catchify as $b8hua$catchify1, use_href_accessor as $b8hua$use_href_accessor1, report as $b8hua$report1 } from "@depict-ai/utilishared/ES10";
 import $b8hua$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.8";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.9";
 function $a604a8ffa4e4c03f$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $b8hua$createSignal();
   const deparallelizedFetcher = $b8hua$deparallelize_no_drop(async dependencyValue => {
@@ -1937,18 +1937,6 @@ const $56047603f9d212b6$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleF
 const $56047603f9d212b6$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 const $56047603f9d212b6$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
-  // Enable reactive props
-  const otherOptions = $b8hua$createMemo(() => {
-    const cloned_props = {
-      ...props
-    };
-    delete cloned_props.resolutions;
-    // @ts-ignore
-    delete cloned_props.size;
-    // @ts-ignore
-    delete cloned_props.src;
-    return cloned_props;
-  });
   const src_options = $b8hua$createMemo(() => {
     const fallback_src = $56047603f9d212b6$var$generateImageUrl(props.src, 400);
     const srcset = $56047603f9d212b6$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
@@ -1960,19 +1948,25 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   });
   // 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 [, otherAttributes] = $b8hua$splitProps(props, ["resolutions", "size", "src", "srcSet", "loading"]);
   const [hasSetSize, setHasSetSize] = $b8hua$createSignal(false);
   const [hasDecoded, setHasDecoded] = $b8hua$createSignal(false);
   const productCardIndexAccessor = $1e69163caedaab4e$export$e3faf4d95300054f();
   const sizePX = $b8hua$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();
   const isPrioritisedImage = $b8hua$createMemo(() => (productCardIndexAccessor === null || productCardIndexAccessor === void 0 ? void 0 : productCardIndexAccessor()) < 8);
-  const loadLazily = $b8hua$createMemo(() => {
+  const shouldActuallyEnableLazyLoading = $b8hua$createMemo(() => {
     const {
       loading: loading
     } = props;
     if (loading === "force-lazy") return true;
     return loading === "lazy" && !isPrioritisedImage();
   });
+  const modifiedOtherAttributes = $b8hua$mergeProps1(otherAttributes, {
+    get loading() {
+      return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
+    }
+  });
   // 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 => {
@@ -2035,7 +2029,7 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     $b8hua$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $b8hua$onCleanup(() => gotCleanedUp = true);
-  $b8hua$spread(img, $b8hua$mergeProps1(otherOptions), false, true);
+  $b8hua$spread(img, $b8hua$mergeProps1(modifiedOtherAttributes), false, true);
   $b8hua$createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -2062,7 +2056,7 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     // 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 (loadLazily()) {
+    if (shouldActuallyEnableLazyLoading()) {
       // 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);

package/server/latest/index.cjs

@@ -88,7 +88,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.8";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.9";
 function $53df95e470b2f8d2$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $5vyXB$solidjs.createSignal();
   const deparallelizedFetcher = $5vyXB$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -1924,18 +1924,6 @@ const $19950faaac026e09$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleF
 const $19950faaac026e09$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 const $19950faaac026e09$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $19950faaac026e09$export$6e5611bc7e57e477(props) {
-  // Enable reactive props
-  const otherOptions = $5vyXB$solidjs.createMemo(() => {
-    const cloned_props = {
-      ...props
-    };
-    delete cloned_props.resolutions;
-    // @ts-ignore
-    delete cloned_props.size;
-    // @ts-ignore
-    delete cloned_props.src;
-    return cloned_props;
-  });
   const src_options = $5vyXB$solidjs.createMemo(() => {
     const fallback_src = $19950faaac026e09$var$generateImageUrl(props.src, 400);
     const srcset = $19950faaac026e09$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
@@ -1947,19 +1935,25 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   });
   // 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 [, otherAttributes] = $5vyXB$solidjs.splitProps(props, ["resolutions", "size", "src", "srcSet", "loading"]);
   const [hasSetSize, setHasSetSize] = $5vyXB$solidjs.createSignal(false);
   const [hasDecoded, setHasDecoded] = $5vyXB$solidjs.createSignal(false);
   const productCardIndexAccessor = $129b9b9c010039d0$export$e3faf4d95300054f();
   const sizePX = $5vyXB$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();
   const isPrioritisedImage = $5vyXB$solidjs.createMemo(() => productCardIndexAccessor?.() < 8);
-  const loadLazily = $5vyXB$solidjs.createMemo(() => {
+  const shouldActuallyEnableLazyLoading = $5vyXB$solidjs.createMemo(() => {
     const {
       loading: loading
     } = props;
     if (loading === "force-lazy") return true;
     return loading === "lazy" && !isPrioritisedImage();
   });
+  const modifiedOtherAttributes = $5vyXB$solidjs.mergeProps(otherAttributes, {
+    get loading() {
+      return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
+    }
+  });
   // 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 => {
@@ -2019,7 +2013,7 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
     $5vyXB$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $5vyXB$solidjs.onCleanup(() => gotCleanedUp = true);
-  $5vyXB$solidjsweb.spread(img, $5vyXB$solidjs.mergeProps(otherOptions), false, true);
+  $5vyXB$solidjsweb.spread(img, $5vyXB$solidjs.mergeProps(modifiedOtherAttributes), false, true);
   $5vyXB$solidjs.createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -2046,7 +2040,7 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
     // 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 (loadLazily()) {
+    if (shouldActuallyEnableLazyLoading()) {
       // 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);

package/server/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.8";
+export const version = "4.0.9";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;

package/server/latest/index.js

@@ -1,5 +1,5 @@
 import { add_to_version_info as $i7OB2$add_to_version_info, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, catchify as $i7OB2$catchify, make_random_classname as $i7OB2$make_random_classname, ContainedImage as $i7OB2$ContainedImage, standard_price_format as $i7OB2$standard_price_format, javascript_media_query as $i7OB2$javascript_media_query, dlog as $i7OB2$dlog, camelCasifyObject as $i7OB2$camelCasifyObject, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, observer as $i7OB2$observer, report as $i7OB2$report, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, queueMacroTask as $i7OB2$queueMacroTask, findMostFrequentItem as $i7OB2$findMostFrequentItem, dwarn as $i7OB2$dwarn, slider_fading_factory as $i7OB2$slider_fading_factory, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $i7OB2$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $i7OB2$layout_get_total_rec_amount_for_row, layout_media_query_header as $i7OB2$layout_media_query_header, use_href_accessor as $i7OB2$use_href_accessor, get_session_id as $i7OB2$get_session_id, add_version_query_params as $i7OB2$add_version_query_params, base_url as $i7OB2$base_url, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, slider_fractional_factory as $i7OB2$slider_fractional_factory, useExpandingContainer as $i7OB2$useExpandingContainer, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, snakeCasifyObject as $i7OB2$snakeCasifyObject, fetch_retry as $i7OB2$fetch_retry, sort_obj as $i7OB2$sort_obj, make_url_with_query_params as $i7OB2$make_url_with_query_params, ListenableSet as $i7OB2$ListenableSet1, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { createSignal as $i7OB2$createSignal, createResource as $i7OB2$createResource, createEffect as $i7OB2$createEffect, untrack as $i7OB2$untrack, createMemo as $i7OB2$createMemo, onCleanup as $i7OB2$onCleanup, Show as $i7OB2$Show, createComputed as $i7OB2$createComputed, For as $i7OB2$For, getOwner as $i7OB2$getOwner, runWithOwner as $i7OB2$runWithOwner, createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, on as $i7OB2$on, Index as $i7OB2$Index, batch as $i7OB2$batch, ErrorBoundary as $i7OB2$ErrorBoundary, mergeProps as $i7OB2$mergeProps1, createUniqueId as $i7OB2$createUniqueId, createRenderEffect as $i7OB2$createRenderEffect, createSelector as $i7OB2$createSelector, children as $i7OB2$children, splitProps as $i7OB2$splitProps, createRoot as $i7OB2$createRoot, Suspense as $i7OB2$Suspense, createReaction as $i7OB2$createReaction, mapArray as $i7OB2$mapArray } from "solid-js";
+import { createSignal as $i7OB2$createSignal, createResource as $i7OB2$createResource, createEffect as $i7OB2$createEffect, untrack as $i7OB2$untrack, createMemo as $i7OB2$createMemo, onCleanup as $i7OB2$onCleanup, Show as $i7OB2$Show, createComputed as $i7OB2$createComputed, For as $i7OB2$For, getOwner as $i7OB2$getOwner, runWithOwner as $i7OB2$runWithOwner, createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, on as $i7OB2$on, Index as $i7OB2$Index, batch as $i7OB2$batch, ErrorBoundary as $i7OB2$ErrorBoundary, splitProps as $i7OB2$splitProps, mergeProps as $i7OB2$mergeProps1, createUniqueId as $i7OB2$createUniqueId, createRenderEffect as $i7OB2$createRenderEffect, createSelector as $i7OB2$createSelector, children as $i7OB2$children, createRoot as $i7OB2$createRoot, Suspense as $i7OB2$Suspense, createReaction as $i7OB2$createReaction, mapArray as $i7OB2$mapArray } from "solid-js";
 import { ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, escape as $i7OB2$escape, createComponent as $i7OB2$createComponent, ssrAttribute as $i7OB2$ssrAttribute, ssrClassList as $i7OB2$ssrClassList, ssrStyle as $i7OB2$ssrStyle, ssrElement as $i7OB2$ssrElement, mergeProps as $i7OB2$mergeProps, insert as $i7OB2$insert, spread as $i7OB2$spread, isServer as $i7OB2$isServer, Dynamic as $i7OB2$Dynamic } from "solid-js/web";
 import { ListenableSet as $i7OB2$ListenableSet, catchify as $i7OB2$catchify1, use_href_accessor as $i7OB2$use_href_accessor1, report as $i7OB2$report1 } from "@depict-ai/utilishared/latest";
 import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from "solid-js/store";
@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.8";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.9";
 function $136f1d4d6c7ba6ac$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $i7OB2$createSignal();
   const deparallelizedFetcher = $i7OB2$deparallelize_no_drop(async dependencyValue => {
@@ -1843,18 +1843,6 @@ const $e8ffe11ed01df0fe$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleF
 const $e8ffe11ed01df0fe$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 const $e8ffe11ed01df0fe$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
-  // Enable reactive props
-  const otherOptions = $i7OB2$createMemo(() => {
-    const cloned_props = {
-      ...props
-    };
-    delete cloned_props.resolutions;
-    // @ts-ignore
-    delete cloned_props.size;
-    // @ts-ignore
-    delete cloned_props.src;
-    return cloned_props;
-  });
   const src_options = $i7OB2$createMemo(() => {
     const fallback_src = $e8ffe11ed01df0fe$var$generateImageUrl(props.src, 400);
     const srcset = $e8ffe11ed01df0fe$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
@@ -1866,19 +1854,25 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   });
   // 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 [, otherAttributes] = $i7OB2$splitProps(props, ["resolutions", "size", "src", "srcSet", "loading"]);
   const [hasSetSize, setHasSetSize] = $i7OB2$createSignal(false);
   const [hasDecoded, setHasDecoded] = $i7OB2$createSignal(false);
   const productCardIndexAccessor = $b6440e72ed83671a$export$e3faf4d95300054f();
   const sizePX = $i7OB2$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 = $011607bdf658f807$export$8d0c4fdbb05a2f2e();
   const isPrioritisedImage = $i7OB2$createMemo(() => productCardIndexAccessor?.() < 8);
-  const loadLazily = $i7OB2$createMemo(() => {
+  const shouldActuallyEnableLazyLoading = $i7OB2$createMemo(() => {
     const {
       loading: loading
     } = props;
     if (loading === "force-lazy") return true;
     return loading === "lazy" && !isPrioritisedImage();
   });
+  const modifiedOtherAttributes = $i7OB2$mergeProps1(otherAttributes, {
+    get loading() {
+      return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
+    }
+  });
   // 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 => {
@@ -1938,7 +1932,7 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     $i7OB2$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $i7OB2$onCleanup(() => gotCleanedUp = true);
-  $i7OB2$spread(img, $i7OB2$mergeProps1(otherOptions), false, true);
+  $i7OB2$spread(img, $i7OB2$mergeProps1(modifiedOtherAttributes), false, true);
   $i7OB2$createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -1965,7 +1959,7 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     // 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 (loadLazily()) {
+    if (shouldActuallyEnableLazyLoading()) {
       // 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);