# PlaceholderState

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/Placeholder.kt+class:androidx.wear.compose.material3.PlaceholderState) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)


```
class PlaceholderState
```

<br />

*** ** * ** ***

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 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/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 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/rememberPlaceholderState.composable#rememberPlaceholderState(kotlin.Boolean)`), and as needed the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PlaceholderState#(kotlin.Boolean)` property should be updated to show/hide the placeholder.

Placeholder has a number of different effects designed to work together. `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/placeholder.composable#(androidx.compose.ui.Modifier).placeholder(androidx.wear.compose.material3.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)` draws a placeholder shape on top of content that is waiting to load. There can be multiple placeholders in a component. `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/placeholderShimmer.composable#(androidx.compose.ui.Modifier).placeholderShimmer(androidx.wear.compose.material3.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)` 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 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/placeholder.composable#(androidx.compose.ui.Modifier).placeholder(androidx.wear.compose.material3.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/placeholderShimmer.composable#(androidx.compose.ui.Modifier).placeholderShimmer(androidx.wear.compose.material3.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)` to the same composable then the shimmer must be before in the modifier chain. Example of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Text.composable#Text(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle)` composable with both placeholderShimmer and placeholder modifiers.

```kotlin
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.placeholder
import androidx.wear.compose.material3.placeholderShimmer
import androidx.wear.compose.material3.rememberPlaceholderState

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"
}
```

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

## Summary

| ### Public constructors |
|---|
| `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/annotation/RememberInComposition https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PlaceholderState#PlaceholderState(kotlin.Boolean)(isVisible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` |

| ### Public properties |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PlaceholderState#isVisible()` Whether the placeholder should be visible. |

## Public constructors

### PlaceholderState

Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
@RememberInComposition
PlaceholderState(isVisible: Boolean)
```

| Parameters |
|---|---|
| `isVisible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether the placeholder will be displayed. This should be modified later updating the state using `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PlaceholderState#isVisible()` |

## Public properties

### isVisible

Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
var isVisible: Boolean
```

Whether the placeholder should be visible. Note that if there is an animation running, this is the target state for the animation.