Skeleton Loader New

The Skeleton Loader component provides visual placeholders that mimic your content's layout during loading states. These animated placeholders improve perceived performance and reduce user frustration by indicating that content is loading.

Getting Started

Using AI

The quickest way to set up skeleton loaders is by using AI:

1. First, think about which content areas you want to show loading states for
2. Ask AI: "Create skeleton loaders for my user profile page" or "Add skeleton loaders to my product cards"
3. Continue refining your skeleton loaders by asking AI for specific modifications:
   • "Make the skeleton loaders use the pulse animation"
   • "Create a skeleton layout for my article list with title and description"
   • "Add rounded corners to match my card design"
   • "Create a skeleton for a circular profile picture with two text lines"

Manual Setup

1. Add a Skeleton Loader component to your page using the Add panel (search for "skeleton" or "loader")
2. Style the component to match the dimensions and shape of your content (width, height, border radius)
3. Choose an animation type that matches your design aesthetic

Animation Types

The Skeleton Loader component offers three animation types via the Animation Type property:

1. Wave - A subtle highlight that moves from left to right across the element

2. Pulse - A gentle fading in and out effect

WARNING

The pulse animation requires you to set a background color on the Skeleton Loader for it to appear correctly.

3. Shimmer - A light reflection that sweeps across the element

Styling Your Skeleton Loader

For the Skeleton Loader to be effective, it's essential to style it properly using the standard styling properties. Here are the key properties to consider:

Essential Styling Properties

Property	Description
Width	Set the width to match your content (can be fixed or responsive)
Height	Set the height to match your content
Background Color	Choose a light gray color that contrasts with your background (e.g., #E0E0E0)
Position	In most cases, you will want the position to be Absolute so that it covers the desired content

WARNING

Without a proper width, height and background color set, your Skeleton Loader may not be visible.

Covering Existing Content

To create a loading state that covers existing content (like product images or cards that are already rendered):

1. Place the Skeleton Loader in the same container as the elements you want to cover
2. Give the Skeleton Loader a position of Absolute, with a top position of 0 and left position of 0
3. Set the width and height of the Skeleton Loader to 100% to fully cover the content
4. Set the z-axis value of the Skeleton Loader to be higher than the contents you want to cover

What these positioning properties do:

Property	What it does
Position: Absolute	This means the element (in this case the Skeleton Loader) ignores the position of the other elements in the container and positions itself relative to the container
Top: 0, Left: 0	Anchors the element to the top-left corner of the container
Width/Height: 100%	Makes the element expand to fill the entire width and height of the container
Z-axis	Controls stacking order - the higher the value, the higher the element will be in the visual stack

TIP

If your container has a border radius and the Skeleton Loader does not seem to match it, then ensure either your container's overflow is set to hidden, or your Skeleton Loader also has the same border radius set as the container.

Conditionally Showing Skeleton Loaders

To show Skeleton Loaders only during loading states:

1. Create a boolean variable (e.g., isLoading) to use for controlling the display

2. Bind the Skeleton Loader's display to this variable

3. Set up logic to appropriately change the value of this variable when needed

Once everything is set up, the Skeleton Loader will display only during loading, like this:

Usage Examples

Text Content Loader

To create a placeholder for text content:

1. Place the Skeleton Loader in a container with the text element
2. Give the Skeleton Loader a position of Absolute, with a top position of 0 and left position of 0
3. Set the width and height of the Skeleton Loader to 100% to fully cover the text
4. Set the z-axis value of the Skeleton Loader to be higher than that of the text element

Card Loader

To create a placeholder for multiple elements in a card:

1. Place the Skeleton Loader in a container with one of the desired elements to cover
2. Give the Skeleton Loader a position of Absolute, with a top position of 0 and left position of 0
3. Set the width and height of the Skeleton Loader to 100% to fully cover the text
4. Set the z-axis value of the Skeleton Loader to be higher than that of the card or image
5. Duplicate the Skeleton Loader and place in containers with all needed elements

TIP

You can easily create a container for an element by pressing ⌘ + G with the element selected in the editor. This is useful if you need the element to be in a container so you can place a Skeleton Loader alongside it.

Best Practices

Do:

• Match the skeleton's dimensions and shape to your actual content
• Use subtle, consistent animations across your interface
• Group related skeleton elements to mirror your content structure
• Display skeletons immediately when loading begins

Don't:

• Use bright or high-contrast colors for skeleton elements
• Mix different animation types in the same loading context
• Make animations too fast or distracting
• Keep skeletons visible for too long (aim for <2 seconds when possible)

Common Use Cases

• Article or blog post loading screens
• Product card loading in e-commerce
• Social media feed item placeholders
• Profile information loading
• Form field placeholders during data retrieval
• Dashboard widget loading states

Forking

While the Skeleton Loader component offers flexibility through its animation types and styling options, there may be cases where you need functionality beyond what's natively available. In these situations, you can fork the component and modify it to meet your specific requirements.

If you are unsure how to fork an element, you can learn more in the dedicated documentation.

Forking Example: Custom Animation Type

One common reason to fork the Skeleton Loader is to create a specialized animation type not available in the standard component. For example, you might want to create a "Bounce" animation that adds a subtle up-and-down movement.

Here's how you can use AI to help with this process:

Modify this forked Skeleton Loader to add a 'Bounce' animation type that adds a subtle vertical movement effect

Forking Example: Changing Animation Speed

Another useful customization is having the ability to control the speed of the animation.

Here's an example prompt for this:

Update this forked Skeleton Loader to add a property for controlling the animation speed

Properties

Settings

Property	Options	Description
Animation Type	Wave, Pulse, Shimmer	Choose the style of loading animation