ShimmerEffect
The ShimmerEffect component provides a visual placeholder while content is loading. Match its dimensions to the content that will replace it to reduce layout shift.
Import
Basic usage
Composing a skeleton
Combine multiple shimmer elements to approximate the final layout.
Loading indicators should not replace an accessible loading label or status when users need to know that work is in progress.
Common props
These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.
Prop | Type | Default | Description |
|---|---|---|---|
| | | Sets the placeholder height. |
| | | Sets the placeholder width. |
| | | Delays the shimmer animation. |
| | | Allows the underlying background to remain visible. |
| | | Leaves dimensions to a custom class or stylesheet. |
Was this page helpful?