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.

if (!productData) {
  return <ImagePlaceholder aspectRatio={3 / 4} />
}

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.

if (!productData) {
    return <TextPlaceholder width="30rem" height="17px" />
}

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.

Was this page helpful?

JavaScript UI ReferenceCustomize PLP Styling with SCSS