Placeholder components

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 TextPlaceholder component by setting width and height instead of aspectRatio.

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

aspectRatio

number

This property represents the aspect ratio of the image to be displayed. Mutually exclusive with width and height.

width

string

This property represents the width of the placeholder to be displayed when in “block-mode”. Mutually exclusive with aspectRatio.

height

string

This property represents the height of the placeholder to be displayed when in “block-mode”. Mutually exclusive with aspectRatio.

`class` (JS) | `className` (React)

string?

Extra classes to add to the placeholder.

style

object

Extra styles to add to the placeholder.

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.

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

width

string

default: "null"

This property represents the width of the text to be displayed.

height

string

default: "null"

This property defines the height of the text to be displayed.

`class` (JS) | `className` (React)

string?

Extra classes to add to the placeholder.

style

object

Extra styles to add to the placeholder.