Skeleton

Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.

Examples

Text

defines a placeholder for loading the <Text> component examples

import { Skeleton } from "@seduo/design-system";
...
<Skeleton />
<Skeleton lines={2} />
...
<Skeleton theme="dark" />
<Skeleton lines={2} theme="dark" />

<Skeleton />
<Skeleton lines={2} />
...
<Skeleton theme="dark" />
<Skeleton lines={2} theme="dark" />

API

Prop name	Type	Default	Description
`lines`	`string`, `number`	1	Specifies an number of lines for skeleton text
`type`	`text`, `hero`, `heading`	`text`	Specifies the type of typography components
`size`	`string`	`medium`	it is allowed all heading and hero sizes
`theme`	Theme dictionary	`light`	Specifies the skeleton theme
`isStandalone`	`bool`	true	Specifies the standalone space after component
`width`	`string`, `number`	button	Specifies an custom skeleton text line width
`UNSAFE_className`	`string`	-	Wrapper custom classname

Hero

defines a placeholder for loading the <Hero> component examples

import { Skeleton } from "@seduo/design-system";
...
<Skeleton type="hero" size="large" />
<Skeleton type="hero" lines={2} size="medium" />
...
<Skeleton type="hero" size="large" theme="dark" />
<Skeleton type="hero" lines={2} size="medium"  theme="dark" />

<Skeleton type="hero" size="large" />
<Skeleton type="hero" lines={2} size="medium" />
...
<Skeleton type="hero" size="large" theme="dark" />
<Skeleton type="hero" lines={2} size="medium"  theme="dark" />

Heading

defines a placeholder for loading the <Heading> component examples

import { Skeleton } from "@seduo/design-system";
...
<Skeleton type="heading" lines={2} size="xlarge" />
<Skeleton type="heading" lines={2} size="large" />
<Skeleton type="heading" lines={2} size="medium"/>
<Skeleton type="heading" lines={2} size="small" />
<Skeleton type="heading" lines={2} size="xsmall" />
...
<Skeleton type="heading" lines={2} size="xlarge" theme="dark" />
<Skeleton type="heading" lines={2} size="large" theme="dark" />
<Skeleton type="heading" lines={2} size="medium" theme="dark"/>
<Skeleton type="heading" lines={2} size="small" theme="dark" />
<Skeleton type="heading" lines={2} size="xsmall" theme="dark" width="300px" />

<Skeleton type="heading" lines={2} size="xlarge" />
<Skeleton type="heading" lines={2} size="large" />
<Skeleton type="heading" lines={2} size="medium"/>
<Skeleton type="heading" lines={2} size="small" />
<Skeleton type="heading" lines={2} size="xsmall" />
...
<Skeleton type="heading" lines={2} size="xlarge" theme="dark" />
<Skeleton type="heading" lines={2} size="large" theme="dark" />
<Skeleton type="heading" lines={2} size="medium" theme="dark"/>
<Skeleton type="heading" lines={2} size="small" theme="dark" />
<Skeleton type="heading" lines={2} size="xsmall" theme="dark" width="300px" />

Image

defines a placeholder for loading the <Image> component examples

import { SkeletonImage } from "@seduo/design-system";
...
<SkeletonImage width="300" height="200" />
...
<SkeletonImage width="100" height="100" isRounded />
...
<SkeletonImage width="100" height="100" isCircle />
...
<SkeletonImage width="300" height="200" theme="dark" />
...
<SkeletonImage width="100" height="100" theme="dark" isRounded />
...
<SkeletonImage width="100" height="100" theme="dark" isCircle />

<SkeletonImage width="300" height="200" />
...
<SkeletonImage width="100" height="100" isRounded />
...
<SkeletonImage width="100" height="100" isCircle />
...
<SkeletonImage width="300" height="200" theme="dark" />
...
<SkeletonImage width="100" height="100" theme="dark" isRounded />
...
<SkeletonImage width="100" height="100" theme="dark" isCircle />

SkeletonImage Properties

Prop name	Type	Default	Description
`alt`	`string`	-	Specifies an alternate text for an skeleton
`isCircle`	`bool`	false	Specifies the image is rounded as circle
`isRounded`	`bool`	false	Specifies the image has rounded corners
`width`	`string` , `number`	-	Specifies the width of an image
`height`	`string` , `number`	-	Specifies the height of an image
`theme`	Theme dictionary	`light`	Specifies the skeleton theme
`wrapperClass`	`string`	-	property to extend `ImageOverlay` with custom class (wrapperClassName in react)
`UNSAFE_className`	`string`	-	Wrapper custom classname

On this page