Last modified: 24/Jun/2024
Skeleton
Loading indicators express an unspecified wait time or display the skeleton before the content appears.
#Usage
import { useState } from 'react'
import { Skeleton } from '@kinsta/stratus'
const MyComponent = () => {
const [loading, setLoading] = useState(false)
return loading ? <Skeleton /> : <div>My Content</div>
}
#Props
#type
SkeletonType
Sets the type of the skeleton
#size
SkeletonSize
Sets the size of the skeleton
#width
string | number
Sets a custom width to the skeleton
#height
string | number
Sets a custom height to the skeleton
#rows
number
Sets the number of rows
#rowSizes
(string | number)[]
Sets the size of each row
#containerStyle
SerializedStyles
Sets a custom container style
#delay
number
Sets the delay of the skeleton