For both search and product listing pages, you need to set up your product card component.

That component will receive a display of the type YourDisplay (see previous page) OR null.

If display is null, it means that there’s no data for this product card yet, and you should display a product card as close to the dimensions as the one you’ll display when you’ll have data, we’ll call this a “placeholder”. The placeholder serves as a loading indicator for users as well as enabling scroll restoration when going back and minimizing content shift.

Example expected output of your product card component

`display` is `null`

`display` is `HoudiniDisplay`

Provided Placeholder components

To make it easier for you to create a placeholder, we provide you with a few components that you can use to create a placeholder.

You can understand their usage from the example below or read the reference.

Displaying color swatches

export interface YourDisplay {
  * The index of the variant to show in the variant_displays array
  variant_index: number;
  * All variants for that product - here you can, for example, get the color of each variant to display color swatches
  variant_displays: YourVariantDisplay[];
  // … other properties

Code example

You probably have an existing product card which you just can add placeholder functionality for. Here’s an example of how it could look like:

import { ImagePlaceholder, TextPlaceholder } from "@depict-ai/react-ui";

export function ProductCard({ display }: { display: null | YourDisplay }) {
  const variant_to_show = display?.variant_displays[display?.variant_index];

  return [
      href={variant_to_show?.page_url || "#"}
      {...(variant_to_show && "recommendation_id" in variant_to_show
        ? { "data-recommendation-id": variant_to_show.recommendation_id }
        : {})}
      {variant_to_show ? (
        <div className="image-container">
          {/* Use the first image in image_urls as the default image */}
          <img className="default-image" src={variant_to_show.image_urls[0]} />
          {/* Use the second image in image_urls as the hover image */}
          <img className="hover-image" src={variant_to_show.image_urls[1]} />
      ) : (
        <ImagePlaceholder aspectRatio={imgAspectRatio} />

      <div className="text-container">
        <div className="rec-title">
          {variant_to_show.title ?? <TextPlaceholder height="1em" width="20ch" />}
        <div className="price-container">
          <span className="price">
            {variant_to_show ? (
              <FormatPrice price={variant_to_show.sale_price} />
            ) : (
              <TextPlaceholder height="1em" width="5ch" />
Note how we branch off to the shimmering placeholder effect in place of the content, when there is no content