The SkeletonBox offers a pre-styled yet highly configurable element that serves as a placeholder for other components, improving the perceived loading experience. Skeleton loading states create the illusion of faster load times by presenting the layout to the user in advance.

import { SkeletonBox } from "@vitality-ds/components";

The SkeletonBox accepts all the same props as the Box component, giving you full control over its positioning and size. Combine it with Flex and Stack components to build your layout.

<SkeletonBox height="100px" width="100%" />

To save you time, commonly used components that benefit from skeleton loading are preconfigured and can be selected with the preset prop. The available preconfigured skeletons are:

• "Button"
• "Input"
• "FormField"

The "Button" skeleton has all the same props as the regular SkeletonBox, with a preconfigured height. Additionally, it offers two special props: size, which can be "compact" or "default", and shouldFitContainer, allow you to match the sizing of the Button component.

<Flex width="100%">
  <SkeletonBox preset="Button" width="120px" />
  <SkeletonBox preset="Button" size="compact" width="120px" />
  <SkeletonBox preset="Button" shouldFitContainer />
</Flex>

The "Input" skeleton also shares all the props of the regular SkeletonBox, with a preconfigured height. You can use the "type" prop, which can be either "default" or "textarea", to mimic the height of a default textarea or other input.

<Flex width="100%" direction="row">
  <SkeletonBox preset="Input" />
  <SkeletonBox preset="Input" type="textarea" />
</Flex>

The "FormField" skeleton functions similarly to the "Input" skeleton but includes space for a label. It also has an optional helperMessage boolean prop that lets you replicate the space for a FormField's helper message.

<Flex width="100%" spacing="lg">
  <SkeletonBox preset="FormField" />
  <SkeletonBox preset="FormField" type="textarea" />
  <SkeletonBox preset="FormField" helperMessage />
</Flex>