---
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. The state should be
created and remembered (maybe using [rememberPlaceholderState]), and as needed the [isVisible]
property should be updated to show/hide the placeholder.

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.


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
public class PlaceholderState(isVisible: 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. The state should be
created and remembered (maybe using `rememberPlaceholderState`), and as needed the `isVisible`
property should be updated to show/hide the placeholder.

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.


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

#### Parameters

| | |
| --- | --- |
| isVisible | whether the placeholder will be displayed. This should be modified later updating the state using `PlaceholderState.isVisible` |




## 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.
 */
@Composable
fun TextPlaceholder() {
    var labelText by remember { mutableStateOf("") }
    val placeholderState = rememberPlaceholderState(isVisible = labelText.isEmpty())
    Text(
        text = labelText,
        overflow = TextOverflow.Ellipsis,
        textAlign = TextAlign.Center,
        modifier =
            Modifier.width(90.dp).placeholderShimmer(placeholderState).placeholder(placeholderState),
    )
    // Simulate content loading
    LaunchedEffect(Unit) {
        delay(3000)
        labelText = "A label"
    }
}
```