AtomSkeleton

> Skeleton is used to display the loading state of a component while avoiding layout shift.



Installation

``sh
$ npm install @s-ui/react-atom-skeleton
`

Usage

$3

#### Import package and use the component

`js
import AtomSkeleton from '@s-ui/react-atom-skeleton'

return ()
`

#### Import the styles (Sass)

`css
@import '~@s-ui/theme/lib/index';
@import '~@s-ui/react-atom-skeleton/lib/index';
`

$3

Use variant prop to shape the skeleton and make it look like the final user interface. Choose between round, square and circle.

`jsx
import AtomSkeleton, {ATOM_SKELETON_VARIANTS} from '@s-ui/react-atom-skeleton'

const VariantStory = () => (
<>




);
`

$3

While the width and height props could be set, it was made to be used directly in your components.

`jsx
import AtomSkeleton from '@s-ui/react-atom-skeleton'

const SizeStory = () => (
<>









);
`

$3

Use animation prop to choose between wave and pulse animation, if the prop is set to false the component won't have any.

`jsx
import AtomSkeleton, {ATOM_SKELETON_ANIMATIONS} from '@s-ui/react-atom-skeleton'

const AnimationStory = () => (
<>




);
`

$3

Use count prop to display several skeletons

`jsx
const CountStory = () => (
<>


);
``

> Find full description and more examples in the demo page.