Pillar UI React Skeleton Component documentation

Skeleton Loader React Component: Enhance perceived performance and reduce loading anxiety with this customizable component.

Components:

Skeleton SkeletonAvatar SkeletonText SkeletonButton SkeletonBox

Type

Components

import

import { Pillar UI React Skeleton Component } from '@pillar-ui/core'

Props

The following are the props that can be used with the Skeleton component:

IsLoading

  • Type: boolean
  • Default: true
  • options: true, false

Determines whether the skeleton component should be shown as loading or not

Example:

Size

  • Type: string
  • default: md
  • Options: 2xs | xs | sm | md | lg | xl | 2xl

Specifies the size of the skeleton component. Supported sizes are:xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl.

Example:

Lines

Type: number Default: 2.5 Options: Any Number

Specifies the number of lines to display for the skeleton text Only Exist for Skeleton.Text.

Use Case

The Skeleton component is typically used in scenarios where content is being fetched asynchronously and there is a delay in loading the actual data. It provides a visual cue to the user that content is being loaded.

Troubleshooting

  • Skeleton component is not displaying properly: Make sure that the isLoading prop is set to true to enable the loading state.
  • Skeleton component does not match the design: You can customize the appearance of the Skeleton component by modifying the CSS eiter by adding a ClassName or add Style property

Conclusion

The Skeleton component is a useful tool for enhancing the perceived performance and user experience of your application. By providing temporary placeholders during loading, you can improve the visual feedback for users and make your application feel more responsive.