# 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. ## Install [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-skeleton/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-skeleton/actions/workflows/release.yml) [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-skeleton?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-skeleton) [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-skeleton?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0) ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge) ```shell $ npm i @aurodesignsystem/auro-skeleton ``` ### Define Dependency in Project Defining the dependency within each project that is using the `` component. ```js import "@aurodesignsystem/auro-skeleton"; ``` ### Use CDN In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported. ```html ``` ## Basic Example ```html ``` ## Custom Component Registration for Version Management There are two key parts to every Auro component: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML. When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you. However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts. You can do this by importing only the component class and using the `register(name)` method with a unique name: ```js // Import the class only import { AuroSkeleton } from '@aurodesignsystem/auro-skeleton/class'; // Register with a custom name if desired AuroSkeleton.register('custom-skeleton'); ``` This will create a new custom element `` that behaves exactly like ``, allowing both to coexist on the same page without interfering with each other.
See code ```html ```