Skeleton is a component that is used to show the user that the content is loading. It is used to improve the user experience and to show the user that the content is loading.

The default skeleton is a squared reactable with a width of 100% and a height of 5rem.

The skeleton with text variant looks like a text line. Count of lines can be configured with lines prop. The last line can be shorter than others with lastLineWidth prop.

You can apply typography or any other classes to the skeleton. For example, va-h1 class will make the skeleton look like a headline.

The skeleton with circle variant looks like a circle. The size of the circle can be configured with height and width prop. Usualy used as avatar placeholder.

The skeleton with rounded variant looks like a rounded rectangle. The size of the rectangle can be configured with height and width prop. Can be used as button or input placeholder.

The skeleton with square variant looks like a square. The size of the square can be configured with height and width prop. Can be used as card or image placeholder.

Skeletons can be grouped in VaSekeletonGroup component to sync their animations. For example, you can use it to create a card, list or table placeholder.

You can use wave animation for VaSkeletonGroup to make it look like a wave. VaSkeletonGroup will sync animations.

Down bellow is an example how you can use skeleton in your application. We use isLoading ref to indicate if content is loading. Don't forget to add aria-busy attribute to the content to indicate that it is loading to sreen reader.