Skeleton
Skeleton component display a placeholder preview before the data gets loaded.
To implement Separator component into your project you’ll need to add the import:
import Skeleton from "@kiwicom/orbit-components/lib/Skeleton";
After adding import into your project you can use it simply like:
<Skeleton height={100} width={300} />
or
<Skeleton><rect x="48" y="8" rx="3" ry="3" width="88" height="6" /><rect x="48" y="26" rx="3" ry="3" width="52" height="6" /><rect x="0" y="56" rx="3" ry="3" width="410" height="6" /></Skeleton>
or if you need to render only rect, you can use the row property like:
<Skeleton rows={3} rowOffset={15} rowHeight={10} />
or you can pick one from our predefined presets:
<Skeleton preset="Button" />
Props
| Name | Type | Default | Description | 
|---|---|---|---|
| animate | boolean | true | Turn off/on animation | 
| children | React.ReactNode | ||
| height | number \| string | 100% | Set height for Svg element | 
| height | number \| string | 100% | Set height for Svg element | 
| maxHeight | number \| string | Set maxHeight for Svg element | |
| rowBorderRadius | number | 3 | Border-radius for row rect elements | 
| rowHeight | number | 21px | Set height for rect elements | 
| rowOffset | number | 20px | Set offset between rect elements | 
| rows | number | Number of rect elements | |
| title | string | loading | Add text for svg accessible name element | 
| preset | Preset | You can pick one of predefined presets | |
| viewBox | string | Set viewBox for Svg element | |
| width | number \| string | 100% | Width of Svg element | 
| spaceAfter | enum | Additional margin-bottomafter component. | |
| dataTest | string | Optional prop for testing purposes | |
| id | string | Set idforSkeleton | |
| color | string | paletteCloudDark | Set color for svg rect element from orbit tokens | 
enum
| spaceAfter | 
|---|
| "none" | 
| "smallest" | 
| "small" | 
| "normal" | 
| "medium" | 
| "large" | 
| "largest" | 
Preset
| Preset | 
|---|
| "List" | 
| "Image" | 
| "Card" | 
| "Button" | 
| "Text" |