# Skeleton The `` custom element is for use when display content takes an extended amount of time to process and render on-screen. This indicator communicates to the user that data is being loaded and that the page is not frozen. [Research](https://www.nngroup.com/articles/progress-indicators/) conducted by the Nielsen Norman Group states that using skeleton states and [loading indicators](https://auro.alaskaair.com/components/auro/loader) improve user satisfaction. The `` element uses animation to convey that the page is still loading in order to reduce user uncertainty. ## Use Cases The `` element can be used on container-based components like `` and other structured lists to indicate loading states. ## Do Not... `` should not be used on action components like ``, `` or ``. Do not represent a loading state with `` for an entire component such as a toast notification, dropdown menus, or a modal dialog. It is appropriate to use `` for content inside those components, but never for the entire component. ## Example(s) ### Basic

See code ```html ```