<h2 id="placeholder-placeholderstate-shape-color">placeholder</h2>

<div class='sourceset sourceset-android'>Android</div>

```kotlin
@ExperimentalWearMaterialApi
@Composable
public fun Modifier.placeholder(
    placeholderState: PlaceholderState,
    shape: Shape = MaterialTheme.shapes.small,
    color: Color =
        MaterialTheme.colors.onSurface
            .copy(alpha = 0.1f)
            .compositeOver(MaterialTheme.colors.surface),
): Modifier
```

Draws a placeholder shape over the top of a composable and animates a wipe off effect to remove
the placeholder. Typically used whilst content is 'loading' and then 'revealed'.

Example of a [Chip](/jetpack-compose/androidx.wear.compose/compose-material/components/Chip) with icon and a label that put placeholders over individual content slots:

Example of a [Chip](/jetpack-compose/androidx.wear.compose/compose-material/components/Chip) with icon and a primary and secondary labels that draws another [Chip](/jetpack-compose/androidx.wear.compose/compose-material/components/Chip) over
the top of it when waiting for placeholder data to load:

The [placeholderState](/jetpack-compose/androidx.wear.compose/compose-material/classes/PlaceholderState) determines when to 'show' and 'wipe off' the placeholder.

NOTE: The order of modifiers is important. If you are adding both [Modifier.placeholder] and
[Modifier.placeholderShimmer] to the same composable then the shimmer must be first in the
modifier chain. Example of [Text](/jetpack-compose/androidx.wear.compose/compose-material/components/Text) composable with both placeholderShimmer and placeholder
modifiers.

#### Parameters

| | |
| --- | --- |
| placeholderState | determines whether the placeholder is visible and controls animation effects for the placeholder. |
| shape | the shape to apply to the placeholder |
| color | the color of the placeholder. |