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.



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.


Shimmers should reflect the structure of the content that people will see once it’s fully rendered.

Shimmer layout

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


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.