@depict-ai/ui 4.0.10 → 4.0.12

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.10";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.12";
 function $a28000bc10de28ad$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $52FdA$solidjs.createSignal();
   const deparallelizedFetcher = $52FdA$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -3235,15 +3235,16 @@ function $f765bad01136eee1$export$c8d7e00464029b45(_ref) {
     itemIndex_: itemIndex_,
     selected_index_: selected_index_,
     modalLayoutStacked_: modalLayoutStacked_,
+    showPlaceholders_: showPlaceholders_,
     currently_showing_suggestions_: [, set_currently_showing_suggestions]
   } = _ref;
   const listings_by_id = $52FdA$solidjs.createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return $52FdA$solidjsweb.memo(() => !!showPlaceholders_())() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $52FdA$solidjs.createMemo(() => listings_by_id()[listingId]);
+      const listing = $52FdA$solidjs.createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $52FdA$solidjsweb.createComponent((0, $d1e7b96fb13cd1d3$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -3267,7 +3268,7 @@ function $f765bad01136eee1$export$c8d7e00464029b45(_ref) {
   return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
     get when() {
       var _listing_suggestions_2;
-      return (_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length;
+      return ((_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length) || showPlaceholders_();
     },
     get children() {
       var _el$ = $52FdA$solidjsweb.getNextElement($f765bad01136eee1$var$_tmpl$),
@@ -3643,6 +3644,7 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
     forceUseDiv_: forceUseDiv_
   } = _ref;
   let on_enter_in_search_field_function;
+  let listingSuggestionsDebounceTimeout;
   // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
   // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
   // Basically the UI signals that the button that opens the modal starts a new search.
@@ -3658,6 +3660,8 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
   const [input_field, set_input_field] = $52FdA$solidjs.createSignal();
   const [searching_for_value_, set_searching_for_value_] = $52FdA$solidjs.createSignal();
   const [show_stale_content_results_, set_show_stale_content_results_] = $52FdA$solidjs.createSignal(false);
+  // For fake debounce
+  const [showStaleListingSuggestions, setShowStaleListingSuggestions] = $52FdA$solidjs.createSignal(false);
   const suggestions_updating_blocked_ = $52FdA$solidjs.createSignal(false);
   const [modalBodyWidth, setModalBodyWidth] = $52FdA$solidjs.createSignal(0);
   const modalLayoutStacked_ = $52FdA$solidjs.createMemo(() => modalBodyWidth() < 650);
@@ -3689,9 +3693,11 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
     set_searching_for_value_: set_searching_for_value_,
     set_show_stale_content_results_: set_show_stale_content_results_
   });
-  const listing_suggestions_ = $52FdA$solidjs.createMemo(() => {
+  const listing_suggestions_ = $52FdA$solidjs.createMemo(prev => {
     var _suggestions_response;
     const all = enable_category_suggestions_ ? (_suggestions_response = suggestions_response_()) === null || _suggestions_response === void 0 ? void 0 : _suggestions_response.filter(item => item.type === "listing") : [];
+    // To prevent jumping of the modal when the visual listing suggestions exist/don't exist we debounce it the same way as the product results
+    if (showStaleListingSuggestions() && !(all !== null && all !== void 0 && all.length)) return prev;
     if (modalLayoutStacked_()) return all;
     return all === null || all === void 0 ? void 0 : all.slice(0, 3);
   });
@@ -3766,6 +3772,13 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
   $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
   addEventListener("keydown", close_on_escape_handler);
   $52FdA$solidjs.onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
+  $52FdA$solidjs.createEffect($52FdA$solidjs.on(get_search_field_value_, () => {
+    setShowStaleListingSuggestions(true);
+    clearTimeout(listingSuggestionsDebounceTimeout);
+    listingSuggestionsDebounceTimeout = setTimeout($52FdA$depictaiutilishared.catchify(() => setShowStaleListingSuggestions(false)), 350);
+  }, {
+    defer: true
+  }));
   if (closing_animation_) register_closing_animation_(closing_animation_);
   $4e44eb7e21ff022a$export$3340fdd8259bd4fd({
     get_search_field_value_: get_search_field_value_,
@@ -3872,7 +3885,8 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });

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.10";
+export const version = "4.0.12";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;

package/ES10/index.js

@@ -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.10";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.12";
 function $a604a8ffa4e4c03f$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $8tj43$createSignal();
   const deparallelizedFetcher = $8tj43$deparallelize_no_drop(async dependencyValue => {
@@ -3151,15 +3151,16 @@ function $ab401afaded322ab$export$c8d7e00464029b45(_ref) {
     itemIndex_: itemIndex_,
     selected_index_: selected_index_,
     modalLayoutStacked_: modalLayoutStacked_,
+    showPlaceholders_: showPlaceholders_,
     currently_showing_suggestions_: [, set_currently_showing_suggestions]
   } = _ref;
   const listings_by_id = $8tj43$createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $8tj43$createComponent((0, $8tj43$For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return $8tj43$memo(() => !!showPlaceholders_())() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $8tj43$createMemo(() => listings_by_id()[listingId]);
+      const listing = $8tj43$createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $8tj43$createComponent((0, $26db6925469636a4$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -3183,7 +3184,7 @@ function $ab401afaded322ab$export$c8d7e00464029b45(_ref) {
   return $8tj43$createComponent((0, $8tj43$Show), {
     get when() {
       var _listing_suggestions_2;
-      return (_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length;
+      return ((_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length) || showPlaceholders_();
     },
     get children() {
       var _el$ = $8tj43$getNextElement($ab401afaded322ab$var$_tmpl$),
@@ -3559,6 +3560,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
     forceUseDiv_: forceUseDiv_
   } = _ref;
   let on_enter_in_search_field_function;
+  let listingSuggestionsDebounceTimeout;
   // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
   // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
   // Basically the UI signals that the button that opens the modal starts a new search.
@@ -3574,6 +3576,8 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
   const [input_field, set_input_field] = $8tj43$createSignal();
   const [searching_for_value_, set_searching_for_value_] = $8tj43$createSignal();
   const [show_stale_content_results_, set_show_stale_content_results_] = $8tj43$createSignal(false);
+  // For fake debounce
+  const [showStaleListingSuggestions, setShowStaleListingSuggestions] = $8tj43$createSignal(false);
   const suggestions_updating_blocked_ = $8tj43$createSignal(false);
   const [modalBodyWidth, setModalBodyWidth] = $8tj43$createSignal(0);
   const modalLayoutStacked_ = $8tj43$createMemo(() => modalBodyWidth() < 650);
@@ -3605,9 +3609,11 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
     set_searching_for_value_: set_searching_for_value_,
     set_show_stale_content_results_: set_show_stale_content_results_
   });
-  const listing_suggestions_ = $8tj43$createMemo(() => {
+  const listing_suggestions_ = $8tj43$createMemo(prev => {
     var _suggestions_response;
     const all = enable_category_suggestions_ ? (_suggestions_response = suggestions_response_()) === null || _suggestions_response === void 0 ? void 0 : _suggestions_response.filter(item => item.type === "listing") : [];
+    // To prevent jumping of the modal when the visual listing suggestions exist/don't exist we debounce it the same way as the product results
+    if (showStaleListingSuggestions() && !(all !== null && all !== void 0 && all.length)) return prev;
     if (modalLayoutStacked_()) return all;
     return all === null || all === void 0 ? void 0 : all.slice(0, 3);
   });
@@ -3682,6 +3688,13 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
   $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
   addEventListener("keydown", close_on_escape_handler);
   $8tj43$onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
+  $8tj43$createEffect($8tj43$on(get_search_field_value_, () => {
+    setShowStaleListingSuggestions(true);
+    clearTimeout(listingSuggestionsDebounceTimeout);
+    listingSuggestionsDebounceTimeout = setTimeout($8tj43$catchify(() => setShowStaleListingSuggestions(false)), 350);
+  }, {
+    defer: true
+  }));
   if (closing_animation_) register_closing_animation_(closing_animation_);
   $a09bb7c652acf957$export$3340fdd8259bd4fd({
     get_search_field_value_: get_search_field_value_,
@@ -3788,7 +3801,8 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });

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.10";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.12";
 function $53df95e470b2f8d2$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $gVhhF$solidjs.createSignal();
   const deparallelizedFetcher = $gVhhF$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -3088,15 +3088,16 @@ function $83e616b38be339e4$export$c8d7e00464029b45({
   itemIndex_: itemIndex_,
   selected_index_: selected_index_,
   modalLayoutStacked_: modalLayoutStacked_,
+  showPlaceholders_: showPlaceholders_,
   currently_showing_suggestions_: [, set_currently_showing_suggestions]
 }) {
   const listings_by_id = $gVhhF$solidjs.createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return $gVhhF$solidjsweb.memo(() => !!showPlaceholders_())() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $gVhhF$solidjs.createMemo(() => listings_by_id()[listingId]);
+      const listing = $gVhhF$solidjs.createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $gVhhF$solidjsweb.createComponent((0, $1f3b5fa875714dea$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -3116,7 +3117,7 @@ function $83e616b38be339e4$export$c8d7e00464029b45({
   })) || []));
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
-      return listing_suggestions_()?.length;
+      return listing_suggestions_()?.length || showPlaceholders_();
     },
     get children() {
       var _el$ = $gVhhF$solidjsweb.getNextElement($83e616b38be339e4$var$_tmpl$),
@@ -3485,6 +3486,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
   forceUseDiv_: forceUseDiv_
 }) {
   let on_enter_in_search_field_function;
+  let listingSuggestionsDebounceTimeout;
   // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
   // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
   // Basically the UI signals that the button that opens the modal starts a new search.
@@ -3500,6 +3502,8 @@ function $11597ae03e703a47$var$RawSearchModalV2({
   const [input_field, set_input_field] = $gVhhF$solidjs.createSignal();
   const [searching_for_value_, set_searching_for_value_] = $gVhhF$solidjs.createSignal();
   const [show_stale_content_results_, set_show_stale_content_results_] = $gVhhF$solidjs.createSignal(false);
+  // For fake debounce
+  const [showStaleListingSuggestions, setShowStaleListingSuggestions] = $gVhhF$solidjs.createSignal(false);
   const suggestions_updating_blocked_ = $gVhhF$solidjs.createSignal(false);
   const [modalBodyWidth, setModalBodyWidth] = $gVhhF$solidjs.createSignal(0);
   const modalLayoutStacked_ = $gVhhF$solidjs.createMemo(() => modalBodyWidth() < 650);
@@ -3531,8 +3535,10 @@ function $11597ae03e703a47$var$RawSearchModalV2({
     set_searching_for_value_: set_searching_for_value_,
     set_show_stale_content_results_: set_show_stale_content_results_
   });
-  const listing_suggestions_ = $gVhhF$solidjs.createMemo(() => {
+  const listing_suggestions_ = $gVhhF$solidjs.createMemo(prev => {
     const all = enable_category_suggestions_ ? suggestions_response_()?.filter(item => item.type === "listing") : [];
+    // To prevent jumping of the modal when the visual listing suggestions exist/don't exist we debounce it the same way as the product results
+    if (showStaleListingSuggestions() && !all?.length) return prev;
     if (modalLayoutStacked_()) return all;
     return all?.slice(0, 3);
   });
@@ -3601,6 +3607,13 @@ function $11597ae03e703a47$var$RawSearchModalV2({
   $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
   addEventListener("keydown", close_on_escape_handler);
   $gVhhF$solidjs.onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
+  $gVhhF$solidjs.createEffect($gVhhF$solidjs.on(get_search_field_value_, () => {
+    setShowStaleListingSuggestions(true);
+    clearTimeout(listingSuggestionsDebounceTimeout);
+    listingSuggestionsDebounceTimeout = setTimeout($gVhhF$depictaiutilishared.catchify(() => setShowStaleListingSuggestions(false)), 350);
+  }, {
+    defer: true
+  }));
   if (closing_animation_) register_closing_animation_(closing_animation_);
   $036d367ce3058351$export$3340fdd8259bd4fd({
     get_search_field_value_: get_search_field_value_,
@@ -3707,7 +3720,8 @@ function $11597ae03e703a47$var$RawSearchModalV2({
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });

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.10";
+export const version = "4.0.12";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;

package/latest/index.js

@@ -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.10";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.12";
 function $136f1d4d6c7ba6ac$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $9HbP8$createSignal();
   const deparallelizedFetcher = $9HbP8$deparallelize_no_drop(async dependencyValue => {
@@ -3007,15 +3007,16 @@ function $44f30a4222ce604b$export$c8d7e00464029b45({
   itemIndex_: itemIndex_,
   selected_index_: selected_index_,
   modalLayoutStacked_: modalLayoutStacked_,
+  showPlaceholders_: showPlaceholders_,
   currently_showing_suggestions_: [, set_currently_showing_suggestions]
 }) {
   const listings_by_id = $9HbP8$createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $9HbP8$createComponent((0, $9HbP8$For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return $9HbP8$memo(() => !!showPlaceholders_())() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $9HbP8$createMemo(() => listings_by_id()[listingId]);
+      const listing = $9HbP8$createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $9HbP8$createComponent((0, $4ce5b8892775b62d$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -3035,7 +3036,7 @@ function $44f30a4222ce604b$export$c8d7e00464029b45({
   })) || []));
   return $9HbP8$createComponent((0, $9HbP8$Show), {
     get when() {
-      return listing_suggestions_()?.length;
+      return listing_suggestions_()?.length || showPlaceholders_();
     },
     get children() {
       var _el$ = $9HbP8$getNextElement($44f30a4222ce604b$var$_tmpl$),
@@ -3404,6 +3405,7 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   forceUseDiv_: forceUseDiv_
 }) {
   let on_enter_in_search_field_function;
+  let listingSuggestionsDebounceTimeout;
   // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
   // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
   // Basically the UI signals that the button that opens the modal starts a new search.
@@ -3419,6 +3421,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   const [input_field, set_input_field] = $9HbP8$createSignal();
   const [searching_for_value_, set_searching_for_value_] = $9HbP8$createSignal();
   const [show_stale_content_results_, set_show_stale_content_results_] = $9HbP8$createSignal(false);
+  // For fake debounce
+  const [showStaleListingSuggestions, setShowStaleListingSuggestions] = $9HbP8$createSignal(false);
   const suggestions_updating_blocked_ = $9HbP8$createSignal(false);
   const [modalBodyWidth, setModalBodyWidth] = $9HbP8$createSignal(0);
   const modalLayoutStacked_ = $9HbP8$createMemo(() => modalBodyWidth() < 650);
@@ -3450,8 +3454,10 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
     set_searching_for_value_: set_searching_for_value_,
     set_show_stale_content_results_: set_show_stale_content_results_
   });
-  const listing_suggestions_ = $9HbP8$createMemo(() => {
+  const listing_suggestions_ = $9HbP8$createMemo(prev => {
     const all = enable_category_suggestions_ ? suggestions_response_()?.filter(item => item.type === "listing") : [];
+    // To prevent jumping of the modal when the visual listing suggestions exist/don't exist we debounce it the same way as the product results
+    if (showStaleListingSuggestions() && !all?.length) return prev;
     if (modalLayoutStacked_()) return all;
     return all?.slice(0, 3);
   });
@@ -3520,6 +3526,13 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
   addEventListener("keydown", close_on_escape_handler);
   $9HbP8$onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
+  $9HbP8$createEffect($9HbP8$on(get_search_field_value_, () => {
+    setShowStaleListingSuggestions(true);
+    clearTimeout(listingSuggestionsDebounceTimeout);
+    listingSuggestionsDebounceTimeout = setTimeout($9HbP8$catchify(() => setShowStaleListingSuggestions(false)), 350);
+  }, {
+    defer: true
+  }));
   if (closing_animation_) register_closing_animation_(closing_animation_);
   $c64d28ca12452b21$export$3340fdd8259bd4fd({
     get_search_field_value_: get_search_field_value_,
@@ -3626,7 +3639,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.0.10",
+  "version": "4.0.12",
   "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.10";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.12";
 function $a28000bc10de28ad$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $3hooq$solidjs.createSignal();
   const deparallelizedFetcher = $3hooq$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -2540,15 +2540,16 @@ function $f765bad01136eee1$export$c8d7e00464029b45(_ref) {
     itemIndex_: itemIndex_,
     selected_index_: selected_index_,
     modalLayoutStacked_: modalLayoutStacked_,
+    showPlaceholders_: showPlaceholders_,
     currently_showing_suggestions_: [, set_currently_showing_suggestions]
   } = _ref;
   const listings_by_id = $3hooq$solidjs.createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return showPlaceholders_() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $3hooq$solidjs.createMemo(() => listings_by_id()[listingId]);
+      const listing = $3hooq$solidjs.createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $3hooq$solidjsweb.createComponent((0, $d1e7b96fb13cd1d3$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -2572,7 +2573,7 @@ function $f765bad01136eee1$export$c8d7e00464029b45(_ref) {
   return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
       var _listing_suggestions_2;
-      return (_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length;
+      return ((_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length) || showPlaceholders_();
     },
     get children() {
       return $3hooq$solidjsweb.ssr($f765bad01136eee1$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "order:" + $3hooq$solidjsweb.escape(itemIndex_(), true), $3hooq$solidjsweb.escape(i18n_.listing_suggestions_()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
@@ -2881,6 +2882,7 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
     forceUseDiv_: forceUseDiv_
   } = _ref;
   let on_enter_in_search_field_function;
+  let listingSuggestionsDebounceTimeout;
   // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
   // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
   // Basically the UI signals that the button that opens the modal starts a new search.
@@ -2896,6 +2898,8 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
   const [input_field, set_input_field] = $3hooq$solidjs.createSignal();
   const [searching_for_value_, set_searching_for_value_] = $3hooq$solidjs.createSignal();
   const [show_stale_content_results_, set_show_stale_content_results_] = $3hooq$solidjs.createSignal(false);
+  // For fake debounce
+  const [showStaleListingSuggestions, setShowStaleListingSuggestions] = $3hooq$solidjs.createSignal(false);
   const suggestions_updating_blocked_ = $3hooq$solidjs.createSignal(false);
   const [modalBodyWidth, setModalBodyWidth] = $3hooq$solidjs.createSignal(0);
   const modalLayoutStacked_ = $3hooq$solidjs.createMemo(() => modalBodyWidth() < 650);
@@ -2927,9 +2931,11 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
     set_searching_for_value_: set_searching_for_value_,
     set_show_stale_content_results_: set_show_stale_content_results_
   });
-  const listing_suggestions_ = $3hooq$solidjs.createMemo(() => {
+  const listing_suggestions_ = $3hooq$solidjs.createMemo(prev => {
     var _suggestions_response;
     const all = enable_category_suggestions_ ? (_suggestions_response = suggestions_response_()) === null || _suggestions_response === void 0 ? void 0 : _suggestions_response.filter(item => item.type === "listing") : [];
+    // To prevent jumping of the modal when the visual listing suggestions exist/don't exist we debounce it the same way as the product results
+    if (showStaleListingSuggestions() && !(all !== null && all !== void 0 && all.length)) return prev;
     if (modalLayoutStacked_()) return all;
     return all === null || all === void 0 ? void 0 : all.slice(0, 3);
   });
@@ -3004,6 +3010,13 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
   $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
   addEventListener("keydown", close_on_escape_handler);
   $3hooq$solidjs.onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
+  $3hooq$solidjs.createEffect($3hooq$solidjs.on(get_search_field_value_, () => {
+    setShowStaleListingSuggestions(true);
+    clearTimeout(listingSuggestionsDebounceTimeout);
+    listingSuggestionsDebounceTimeout = setTimeout($3hooq$depictaiutilishared.catchify(() => setShowStaleListingSuggestions(false)), 350);
+  }, {
+    defer: true
+  }));
   if (closing_animation_) register_closing_animation_(closing_animation_);
   $4e44eb7e21ff022a$export$3340fdd8259bd4fd({
     get_search_field_value_: get_search_field_value_,
@@ -3103,7 +3116,8 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });

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.10";
+export const version = "4.0.12";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;

package/server/ES10/index.js

@@ -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.10";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.12";
 function $a604a8ffa4e4c03f$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $b8hua$createSignal();
   const deparallelizedFetcher = $b8hua$deparallelize_no_drop(async dependencyValue => {
@@ -2456,15 +2456,16 @@ function $ab401afaded322ab$export$c8d7e00464029b45(_ref) {
     itemIndex_: itemIndex_,
     selected_index_: selected_index_,
     modalLayoutStacked_: modalLayoutStacked_,
+    showPlaceholders_: showPlaceholders_,
     currently_showing_suggestions_: [, set_currently_showing_suggestions]
   } = _ref;
   const listings_by_id = $b8hua$createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $b8hua$createComponent((0, $b8hua$For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return showPlaceholders_() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $b8hua$createMemo(() => listings_by_id()[listingId]);
+      const listing = $b8hua$createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $b8hua$createComponent((0, $26db6925469636a4$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -2488,7 +2489,7 @@ function $ab401afaded322ab$export$c8d7e00464029b45(_ref) {
   return $b8hua$createComponent((0, $b8hua$Show), {
     get when() {
       var _listing_suggestions_2;
-      return (_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length;
+      return ((_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length) || showPlaceholders_();
     },
     get children() {
       return $b8hua$ssr($ab401afaded322ab$var$_tmpl$, $b8hua$ssrHydrationKey(), "order:" + $b8hua$escape(itemIndex_(), true), $b8hua$escape(i18n_.listing_suggestions_()), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
@@ -2797,6 +2798,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
     forceUseDiv_: forceUseDiv_
   } = _ref;
   let on_enter_in_search_field_function;
+  let listingSuggestionsDebounceTimeout;
   // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
   // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
   // Basically the UI signals that the button that opens the modal starts a new search.
@@ -2812,6 +2814,8 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
   const [input_field, set_input_field] = $b8hua$createSignal();
   const [searching_for_value_, set_searching_for_value_] = $b8hua$createSignal();
   const [show_stale_content_results_, set_show_stale_content_results_] = $b8hua$createSignal(false);
+  // For fake debounce
+  const [showStaleListingSuggestions, setShowStaleListingSuggestions] = $b8hua$createSignal(false);
   const suggestions_updating_blocked_ = $b8hua$createSignal(false);
   const [modalBodyWidth, setModalBodyWidth] = $b8hua$createSignal(0);
   const modalLayoutStacked_ = $b8hua$createMemo(() => modalBodyWidth() < 650);
@@ -2843,9 +2847,11 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
     set_searching_for_value_: set_searching_for_value_,
     set_show_stale_content_results_: set_show_stale_content_results_
   });
-  const listing_suggestions_ = $b8hua$createMemo(() => {
+  const listing_suggestions_ = $b8hua$createMemo(prev => {
     var _suggestions_response;
     const all = enable_category_suggestions_ ? (_suggestions_response = suggestions_response_()) === null || _suggestions_response === void 0 ? void 0 : _suggestions_response.filter(item => item.type === "listing") : [];
+    // To prevent jumping of the modal when the visual listing suggestions exist/don't exist we debounce it the same way as the product results
+    if (showStaleListingSuggestions() && !(all !== null && all !== void 0 && all.length)) return prev;
     if (modalLayoutStacked_()) return all;
     return all === null || all === void 0 ? void 0 : all.slice(0, 3);
   });
@@ -2920,6 +2926,13 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
   $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
   addEventListener("keydown", close_on_escape_handler);
   $b8hua$onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
+  $b8hua$createEffect($b8hua$on(get_search_field_value_, () => {
+    setShowStaleListingSuggestions(true);
+    clearTimeout(listingSuggestionsDebounceTimeout);
+    listingSuggestionsDebounceTimeout = setTimeout($b8hua$catchify(() => setShowStaleListingSuggestions(false)), 350);
+  }, {
+    defer: true
+  }));
   if (closing_animation_) register_closing_animation_(closing_animation_);
   $a09bb7c652acf957$export$3340fdd8259bd4fd({
     get_search_field_value_: get_search_field_value_,
@@ -3019,7 +3032,8 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });

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.10";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.12";
 function $53df95e470b2f8d2$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $5vyXB$solidjs.createSignal();
   const deparallelizedFetcher = $5vyXB$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -2414,15 +2414,16 @@ function $83e616b38be339e4$export$c8d7e00464029b45({
   itemIndex_: itemIndex_,
   selected_index_: selected_index_,
   modalLayoutStacked_: modalLayoutStacked_,
+  showPlaceholders_: showPlaceholders_,
   currently_showing_suggestions_: [, set_currently_showing_suggestions]
 }) {
   const listings_by_id = $5vyXB$solidjs.createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return showPlaceholders_() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $5vyXB$solidjs.createMemo(() => listings_by_id()[listingId]);
+      const listing = $5vyXB$solidjs.createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $5vyXB$solidjsweb.createComponent((0, $1f3b5fa875714dea$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -2442,7 +2443,7 @@ function $83e616b38be339e4$export$c8d7e00464029b45({
   })) || []));
   return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
-      return listing_suggestions_()?.length;
+      return listing_suggestions_()?.length || showPlaceholders_();
     },
     get children() {
       return $5vyXB$solidjsweb.ssr($83e616b38be339e4$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "order:" + $5vyXB$solidjsweb.escape(itemIndex_(), true), $5vyXB$solidjsweb.escape(i18n_.listing_suggestions_()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
@@ -2744,6 +2745,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
   forceUseDiv_: forceUseDiv_
 }) {
   let on_enter_in_search_field_function;
+  let listingSuggestionsDebounceTimeout;
   // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
   // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
   // Basically the UI signals that the button that opens the modal starts a new search.
@@ -2759,6 +2761,8 @@ function $11597ae03e703a47$var$RawSearchModalV2({
   const [input_field, set_input_field] = $5vyXB$solidjs.createSignal();
   const [searching_for_value_, set_searching_for_value_] = $5vyXB$solidjs.createSignal();
   const [show_stale_content_results_, set_show_stale_content_results_] = $5vyXB$solidjs.createSignal(false);
+  // For fake debounce
+  const [showStaleListingSuggestions, setShowStaleListingSuggestions] = $5vyXB$solidjs.createSignal(false);
   const suggestions_updating_blocked_ = $5vyXB$solidjs.createSignal(false);
   const [modalBodyWidth, setModalBodyWidth] = $5vyXB$solidjs.createSignal(0);
   const modalLayoutStacked_ = $5vyXB$solidjs.createMemo(() => modalBodyWidth() < 650);
@@ -2790,8 +2794,10 @@ function $11597ae03e703a47$var$RawSearchModalV2({
     set_searching_for_value_: set_searching_for_value_,
     set_show_stale_content_results_: set_show_stale_content_results_
   });
-  const listing_suggestions_ = $5vyXB$solidjs.createMemo(() => {
+  const listing_suggestions_ = $5vyXB$solidjs.createMemo(prev => {
     const all = enable_category_suggestions_ ? suggestions_response_()?.filter(item => item.type === "listing") : [];
+    // To prevent jumping of the modal when the visual listing suggestions exist/don't exist we debounce it the same way as the product results
+    if (showStaleListingSuggestions() && !all?.length) return prev;
     if (modalLayoutStacked_()) return all;
     return all?.slice(0, 3);
   });
@@ -2860,6 +2866,13 @@ function $11597ae03e703a47$var$RawSearchModalV2({
   $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
   addEventListener("keydown", close_on_escape_handler);
   $5vyXB$solidjs.onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
+  $5vyXB$solidjs.createEffect($5vyXB$solidjs.on(get_search_field_value_, () => {
+    setShowStaleListingSuggestions(true);
+    clearTimeout(listingSuggestionsDebounceTimeout);
+    listingSuggestionsDebounceTimeout = setTimeout($5vyXB$depictaiutilishared.catchify(() => setShowStaleListingSuggestions(false)), 350);
+  }, {
+    defer: true
+  }));
   if (closing_animation_) register_closing_animation_(closing_animation_);
   $036d367ce3058351$export$3340fdd8259bd4fd({
     get_search_field_value_: get_search_field_value_,
@@ -2959,7 +2972,8 @@ function $11597ae03e703a47$var$RawSearchModalV2({
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });

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.10";
+export const version = "4.0.12";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;

package/server/latest/index.js

@@ -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.10";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.12";
 function $136f1d4d6c7ba6ac$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $i7OB2$createSignal();
   const deparallelizedFetcher = $i7OB2$deparallelize_no_drop(async dependencyValue => {
@@ -2333,15 +2333,16 @@ function $44f30a4222ce604b$export$c8d7e00464029b45({
   itemIndex_: itemIndex_,
   selected_index_: selected_index_,
   modalLayoutStacked_: modalLayoutStacked_,
+  showPlaceholders_: showPlaceholders_,
   currently_showing_suggestions_: [, set_currently_showing_suggestions]
 }) {
   const listings_by_id = $i7OB2$createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $i7OB2$createComponent((0, $i7OB2$For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return showPlaceholders_() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $i7OB2$createMemo(() => listings_by_id()[listingId]);
+      const listing = $i7OB2$createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $i7OB2$createComponent((0, $4ce5b8892775b62d$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -2361,7 +2362,7 @@ function $44f30a4222ce604b$export$c8d7e00464029b45({
   })) || []));
   return $i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
-      return listing_suggestions_()?.length;
+      return listing_suggestions_()?.length || showPlaceholders_();
     },
     get children() {
       return $i7OB2$ssr($44f30a4222ce604b$var$_tmpl$, $i7OB2$ssrHydrationKey(), "order:" + $i7OB2$escape(itemIndex_(), true), $i7OB2$escape(i18n_.listing_suggestions_()), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
@@ -2663,6 +2664,7 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   forceUseDiv_: forceUseDiv_
 }) {
   let on_enter_in_search_field_function;
+  let listingSuggestionsDebounceTimeout;
   // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
   // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
   // Basically the UI signals that the button that opens the modal starts a new search.
@@ -2678,6 +2680,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   const [input_field, set_input_field] = $i7OB2$createSignal();
   const [searching_for_value_, set_searching_for_value_] = $i7OB2$createSignal();
   const [show_stale_content_results_, set_show_stale_content_results_] = $i7OB2$createSignal(false);
+  // For fake debounce
+  const [showStaleListingSuggestions, setShowStaleListingSuggestions] = $i7OB2$createSignal(false);
   const suggestions_updating_blocked_ = $i7OB2$createSignal(false);
   const [modalBodyWidth, setModalBodyWidth] = $i7OB2$createSignal(0);
   const modalLayoutStacked_ = $i7OB2$createMemo(() => modalBodyWidth() < 650);
@@ -2709,8 +2713,10 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
     set_searching_for_value_: set_searching_for_value_,
     set_show_stale_content_results_: set_show_stale_content_results_
   });
-  const listing_suggestions_ = $i7OB2$createMemo(() => {
+  const listing_suggestions_ = $i7OB2$createMemo(prev => {
     const all = enable_category_suggestions_ ? suggestions_response_()?.filter(item => item.type === "listing") : [];
+    // To prevent jumping of the modal when the visual listing suggestions exist/don't exist we debounce it the same way as the product results
+    if (showStaleListingSuggestions() && !all?.length) return prev;
     if (modalLayoutStacked_()) return all;
     return all?.slice(0, 3);
   });
@@ -2779,6 +2785,13 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
   addEventListener("keydown", close_on_escape_handler);
   $i7OB2$onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
+  $i7OB2$createEffect($i7OB2$on(get_search_field_value_, () => {
+    setShowStaleListingSuggestions(true);
+    clearTimeout(listingSuggestionsDebounceTimeout);
+    listingSuggestionsDebounceTimeout = setTimeout($i7OB2$catchify(() => setShowStaleListingSuggestions(false)), 350);
+  }, {
+    defer: true
+  }));
   if (closing_animation_) register_closing_animation_(closing_animation_);
   $c64d28ca12452b21$export$3340fdd8259bd4fd({
     get_search_field_value_: get_search_field_value_,
@@ -2878,7 +2891,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });