Skeleton

Use to show a placeholder while content is loading.

Basic Usage

Skeleton renders a shimmer animation that sweeps left-to-right indefinitely. Size and shape it with modifier and shape to match the real content it stands in for.

API Reference

`Skeleton`

Parameter	Type	Default	Description
`modifier`	`Modifier`	`Modifier`	Controls size, padding, and position of the skeleton. Set `width` and `height` here.
`shape`	`RoundedCornerShape`	`RoundedCornerShape(MaterialTheme.radius.md)`	Shape of the skeleton. Pass `CircleShape` for avatar placeholders.
`baseColor`	`Color`	`MaterialTheme.styles.muted`	The base background color of the shimmer track.
`shimmerColor`	`Color`	`MaterialTheme.styles.muted.copy(alpha = 0.5f)`	The highlight color that sweeps across the skeleton.
`animationDurationMillis`	`Int`	`1500`	Duration of one full shimmer sweep in milliseconds.
`gradientWidthRatio`	`Float`	`0.5f`	Width of the shimmer highlight relative to the skeleton's width. Higher values produce a wider glow.

Behaviour notes

The shimmer is a Brush.linearGradient that transitions baseColor → shimmerColor → baseColor swept left to right.
The animation is infiniteRepeatable with RepeatMode.Restart and LinearEasing for a consistent sweep pace.
gradientWidthRatio controls how "wide" the highlight band is — 0.3f gives a narrow streak, 0.8f a broad wave.
There is no "loaded" state — replace the Skeleton composable with the real content once data is available.

Edit this page on GitHub