Pillar UI React Skeleton Component documentation
Skeleton Loader React Component: Enhance perceived performance and reduce loading anxiety with this customizable component.
Components:
Type
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.