Skeleton

The Skeleton component is a placeholder UI element that simulates the layout of content while the actual data is being loaded.

React documented

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Storybook

React guidance

Source

GitHub code

Example

Storybook failed to load. Please connect to the VPN to access.


                                                        
                                                        
                                                            import { SkeletonCard, SkeletonCircle, SkeletonText, Stack } from '@optimus-web/core';
                                                        
                                                        <SkeletonCard width="200px" height="160px" />
                                                        <Stack spacing="200" vertical>
                                                            <SkeletonCircle diameter={60} />
                                                            <SkeletonText width="200px" />
                                                            <SkeletonText width="120px" />
                                                            <SkeletonText width="160px" />
                                                        </Stack>

API

SkeletonCard

Name	Description	Type	Default
height?		string	100%
width?		string	100%

SkeletonCircle

Name	Description	Type	Default
diameter?		number	16px

SkeletonText

Name	Description	Type	Default
fontSize?		number	12px
width?		string	80px