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:
This property represents the aspect ratio of the image to be displayed. Mutually exclusive with width and height.
This property represents the width of the placeholder to be displayed when in “block-mode”. Mutually exclusive with aspectRatio.
This property represents the height of the placeholder to be displayed when in “block-mode”. Mutually exclusive with aspectRatio.
Extra classes to add to the placeholder.
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:
This property represents the width of the text to be displayed.
This property defines the height of the text to be displayed.
Extra classes to add to the placeholder.
Extra styles to add to the placeholder.
Was this page helpful?