A component with a visual loading animation indicating that content is being fetched or loaded

A skeleton component is a visual loading animation used to indicate that content is being fetched or loaded, providing options for controlling its appearance and animations.

skeleton component of Peaka

Key Features

Skeleton components offer the following key features:

  • Styles: Customize the initial styles of the skeleton to align with your application's design.

  • Animation: The "Animation" switch enables or disables animations for the skeleton. You can choose to have animated loading indicators or static placeholders.

How to Use Skeletons

To use skeleton components in your application:

Animation: Use the "Animation" switch to enable or disable animations for the skeleton. Animated skeletons can provide a more engaging loading experience, while static skeletons can be used for simple content placeholders.

Use Cases

Skeleton components are commonly used in various scenarios, including:

  • Page loading: Display a skeleton animation while content on a page is loading to provide visual feedback to users.

  • Image loading: Use skeletons as placeholders for images that are still loading.

  • Content loading: Show skeletons in place of content that is being fetched from a server, such as articles, user profiles, or product listings.

Skeleton components enhance user experiences by indicating that content is loading and reducing the perception of long loading times.