---
title: "PlaceholderState"
description: "A state object that can be used to control placeholders. Placeholders are used when the content
that needs to be displayed in a component is not yet available, e.g. it is loading
asynchronously.

A [PlaceholderState] should be created for each component that has placeholder data. The state is
used to coordinate all of the different placeholder effects and animations.

Placeholder has a number of different effects designed to work together. [Modifier.placeholder]
draws a placeholder shape on top of content that is waiting to load. There can be multiple
placeholders in a component. [Modifier.placeholderShimmer] does a shimmer animation over the
whole component that includes the placeholders. There should only be one placeholderShimmer for
each component.

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 before in the
modifier chain. Example of [Text] composable with both placeholderShimmer and placeholder
modifiers.


Background placeholder effects are used to mask the background of components like chips and cards
until all of the data has loaded. Use [PlaceholderDefaults.placeholderChipColors]
[PlaceholderDefaults.placeholderBackgroundBrush] and
[PlaceholderDefaults.painterWithPlaceholderOverlayBackgroundBrush] to draw the component
background.

Once all of the components content is loaded the shimmer will stop and a wipe off animation will
remove the placeholders."
type: "class"
---

<div class='type'>Class</div>


<a id='references'></a>

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


```kotlin
@ExperimentalWearMaterialApi
public class PlaceholderState
internal constructor(
    private val isContentReady: State<() -> Boolean>,
    private val maxScreenDimension: Float,
    private val isReduceMotionEnabled: Boolean,
)
```


A state object that can be used to control placeholders. Placeholders are used when the content
that needs to be displayed in a component is not yet available, e.g. it is loading
asynchronously.

A `PlaceholderState` should be created for each component that has placeholder data. The state is
used to coordinate all of the different placeholder effects and animations.

Placeholder has a number of different effects designed to work together. `Modifier.placeholder`
draws a placeholder shape on top of content that is waiting to load. There can be multiple
placeholders in a component. `Modifier.placeholderShimmer` does a shimmer animation over the
whole component that includes the placeholders. There should only be one placeholderShimmer for
each component.

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 before in the
modifier chain. Example of `Text` composable with both placeholderShimmer and placeholder
modifiers.


Background placeholder effects are used to mask the background of components like chips and cards
until all of the data has loaded. Use `PlaceholderDefaults.placeholderChipColors`
`PlaceholderDefaults.placeholderBackgroundBrush` and
`PlaceholderDefaults.painterWithPlaceholderOverlayBackgroundBrush` to draw the component
background.

Once all of the components content is loaded the shimmer will stop and a wipe off animation will
remove the placeholders.


## Functions

```kotlin
public suspend fun startPlaceholderAnimation()
```


Start the animation of the placeholder state.



## Code Examples

### TextPlaceholder
```kotlin
/**
 * This sample applies a placeholder and placeholderShimmer directly over a single composable.
 *
 * Note that the modifier ordering is important, the placeholderShimmer must be before the
 * placeholder in the modifier chain - otherwise the shimmer will be drawn underneath the
 * placeholder and will not be visible.
 */
@OptIn(ExperimentalWearMaterialApi::class)
@Composable
fun TextPlaceholder() {
    var labelText by remember { mutableStateOf("") }
    val chipPlaceholderState = rememberPlaceholderState { labelText.isNotEmpty() }
    Text(
        text = labelText,
        overflow = TextOverflow.Ellipsis,
        textAlign = TextAlign.Center,
        modifier =
            Modifier.width(90.dp)
                .placeholderShimmer(chipPlaceholderState)
                .placeholder(chipPlaceholderState),
    )
    // Simulate content loading
    LaunchedEffect(Unit) {
        delay(3000)
        labelText = "A label"
    }
    if (!chipPlaceholderState.isShowContent) {
        LaunchedEffect(chipPlaceholderState) { chipPlaceholderState.startPlaceholderAnimation() }
    }
}
```