A skeleton or shimmer effect that maintains your content's dimensions and layout. It conveys to the user that the content is about to load, providing a better loading UX than a simple spinner. In most cases, content is gradually loaded, which allows users to maintain a sense of progress and the perception that a page load is faster than it is. Users are actively waiting, meaning that they can interact with the page or consume at least some part of the content while the rest is loading.

Check the documentation or demo to learn how to use.

Why use a skeleton loading?

• Improved User Experience: Skeleton loading provides a visual cue that content is being loaded, keeping users engaged and informed rather than staring at a blank screen.
• Reduced Perceived Wait Time: By showing placeholders, users perceive the loading time to be shorter, which can improve overall satisfaction.
• Smooth Content Transition: It ensures a smoother transition between loading states and the final content, reducing the jarring effect of sudden content appearance and improving "Layout Shift" metrics.

This component is based on the EasyPlaceholder asset. It takes the learnings of some articles to improve on it in the following ways:

• Better performance: Uses modern CSS features to give hints to the browser, so the animations are optimized. Does not require a JavaScript file.
• Accessibility (A11y): Displays correct information for screen readers. Respects users preferences regarding contrast and motion settings.
• More flexibility: By not bundling the CSS in the block stylesheet you get the control over when your styles are loaded and more flexibility over customizations.