> ## Documentation Index
> Fetch the complete documentation index at: https://docs.depict.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Placeholder components

<Warning>
  This page does not apply to installs made in 2025 or later of the Depict Shopify apps
</Warning>

We export the following placeholder components to make it easier for you to build placeholder product cards for while the product data loads.

### The `ImagePlaceholder` component

This component renders a shimmering placeholder to be used in place of an image, while your product data loads. Modify this component to replicate the dimensions of your image.
It can also be used as a [block](https://developer.mozilla.org/en-US/docs/Glossary/Block/CSS) TextPlaceholder component by setting `width` and `height` instead of `aspectRatio`.

<CodeGroup>
  ```typescript TypeScript (JSX) theme={null}
  if (!productData) {
    return <ImagePlaceholder aspectRatio={3 / 4} />
  }
  ```

  ```typescript TypeScript theme={null}
  if (!productData) {
    return ImagePlaceholder({ aspectRatio: 3 / 4 })
  }
  ```
</CodeGroup>

The following table shows the `ImagePlaceholder` configuration properties, their types, and descriptions:

<ResponseField name="aspectRatio" type="number">
  This property represents the aspect ratio of the image to be displayed. Mutually exclusive with `width` and `height`.
</ResponseField>

<ResponseField name="width" type="string">
  This property represents the width of the placeholder to be displayed when in "block-mode". Mutually exclusive with `aspectRatio`.
</ResponseField>

<ResponseField name="height" type="string">
  This property represents the height of the placeholder to be displayed when in "block-mode". Mutually exclusive with `aspectRatio`.
</ResponseField>

<ResponseField name="`class` (JS) | `className` (React)" type="string?">
  Extra classes to add to the placeholder.
</ResponseField>

<ResponseField name="style" type="object">
  Extra styles to add to the placeholder.
</ResponseField>

### The `TextPlaceholder` component

This component renders a shimmering placeholder to be used in place of text, while your product data loads. Modify this component to replicate the dimensions of your actual product text data.

<CodeGroup>
  ```typescript TypeScript (JSX) theme={null}
  if (!productData) {
      return <TextPlaceholder width="30rem" height="17px" />
  }
  ```

  ```typescript TypeScript theme={null}
  if (!productData) {
    return TextPlaceholder({ width: "30rem", height: "17px" })
  }
  ```
</CodeGroup>

The following table shows the `TextPlaceholder` configuration properties, their types, and descriptions:

<ResponseField name="width" type="string" default="null">
  This property represents the width of the text to be displayed.
</ResponseField>

<ResponseField name="height" type="string" default="null">
  This property defines the height of the text to be displayed.
</ResponseField>

<ResponseField name="`class` (JS) | `className` (React)" type="string?">
  Extra classes to add to the placeholder.
</ResponseField>

<ResponseField name="style" type="object">
  Extra styles to add to the placeholder.
</ResponseField>