Shimmer Preview
A shimmer lets people know that a section of information is loading without blocking other UI elements from rendering.
Use shimmers to gradually load layouts and give hints about the structure of information.
Resources
Behavior
Indeterminate loading
Shimmers are indeterminate indicators. They don’t communicate how much time is left before a process is done. Avoid them for long loading processes. Seeing a shimmer for too long could make people think something’s gone wrong.
Layout
Shimmers should reflect the structure of the content that people will see once it’s fully rendered.
When loading dynamic components with variable final content, use a shimmer to communicate consistent, high-level information. Most importantly, keep it simple. Only reflect consistent parts of the UI to avoid a busy layout.
For example, if loading a persona, the skeleton should reflect an avatar, a title, and a subtitle. There’s no need to reflect specifics, like a presence badge, even if they’re present in the loaded content
Accessibility
If the Remove Animations setting is enabled, the shimmer won’t animate. Otherwise, add an animating label while the shimmer is on screen to let people who use TalkBack know what’s happening.