When to use a skeleton
If you have content that takes more than a couple of seconds to load, use these to hint at the structure of content that users will see. Skeletons let users know something is happening, but not how long until it’s done.
Behavior
Skeletons have two animation styles: wave and pulse. Wave is the default animation and provides the smoothest transition. In most cases, especially those with a lot of skeletons on screen at once, stick with wave for the best experience.
Best practices
Have a consistent layout
Ensure skeleton screens mimic the layout and structure of the final content. This helps users anticipate how the content will appear and reduces confusion during loading.
Loading states
Use skeleton screens when data is being fetched or loaded, such as during page transitions, content updates, or when initially displaying dynamic content. They provide users with a visual cue of what to expect and reduce perceived wait times.