Chakra-UI

I♥️Components

Skeletons

|

Chakra Docs

|

⦾ The Skeleton component in Chakra UI is a content placeholder used to suggest that content is loading. They provide a low fidelity representation of the content that is loading and are typically used to improve perceived performance and offer a more seamless user experience.

Skeleton components can be used in a wide range of scenarios, such as when loading a page, an image, or a piece of text content. By using a Skeleton component, you can prevent abrupt changes in your application, providing a smoother visual transition as content loads.

One of the key features of the Skeleton component is its animation. By default, it uses a shimmer effect to better convey the loading state to the user. You can control whether this animation is active or not, and can also customize the speed of the animation. The Skeleton component in Chakra UI is highly flexible and can be adapted to fit a variety of shapes and sizes based on the content it's replacing. You can control its width, height, and other box model properties to fit your needs.

As far as accessibility, Chakra UI applies the appropriate ARIA roles and properties to the Skeleton component to indicate to assistive technologies that the content is being loaded. This makes it an excellent tool for building inclusive and performant user interfaces.

  • isLoaded: Determines if the skeleton should still be shown or if the content is ready and should be displayed.
  • startColor / endColor: Controls the animation's color at the start and end. Typically you'll want to keep these subtle.
  • fadeInDuration: Determines the duration of the fade-in animation when the isLoaded prop becomes true.
  • speed: Controls the speed of the shimmer animation.

To import these components:

Examples

Basic Usage::

⦾ Let's start with a simple yet functional application. Here's an example of a stack of three skeleton components, all having a set height. Until your actual content is ready, these will create an engaging placeholder to keep your design's flow intact.

The Invisible Wrapper::

⦾ This example perfectly demonstrates how the Skeleton component can wrap around any content, making it invisible until it's fully loaded. A real game-changer for suspenseful content reveals!
contents wrapped
won't be visible

Waiting on Remote Data:

⦾ Skeletons serve as great placeholders while your app is fetching remote data. Watch how in the following code, the Skeleton maintains the visual structure of the content until the actual data is ready.

Code

Skeleton Shapes and Text:

⦾ In addition to regular bar-like placeholders, Chakra UI providesSkeletonCircle and SkeletonText for more variety. Check out how they work in the following snippet.

Code

Color-Changing Skeleton:

⦾ With startColor and endColor properties, you can create dynamic, color-changing skeletons. It's like a fun little light show while the user waits for content to load.

Code

Using isLoaded Prop:

⦾ Control the rendering of the skeleton with the isLoaded prop. If you don't want a skeleton, this is the way to do it.
A world with no skeletons.

Code

Controlling Fade Duration::

⦾ FadeDuration prop lets you control the speed of your content fade-in. The number you pass is the duration in seconds for the animation. By default, it's 0.4 seconds. Try it out with isLoaded prop set to true!
I hope
that you
have a great day!

Code

Did you know?

Creative Idea No. 1

Skeleton for Card Layout: In case you have a card layout that takes a while to populate, Skeletons can be a visually engaging way to keep the user interested.

Code

Creative Idea No. 2

Table Data Loading with Skeleton Rows: When fetching data to fill a table, it can be a great UX choice to use Skeleton rows that correspond to the structure of your actual data rows.
NameEmail

Code

Creative Idea No. 3

Skeleton for Image Loading: Images often take a significant time to load. While waiting for an image to load, you can use the Skeleton component as a placeholder.
Kinda looks like bubbles...

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.