placeholder

Draws a placeholder effect over content while it is loading.

This modifier displays an animated placeholder overlay that covers the content when enabled is true, and smoothly transitions to reveal the actual content when enabled becomes false. It's commonly used to indicate loading states for images, text, and other UI elements.

The placeholder can be customized with different colors, shapes, and highlight animations. Several pre-built highlight effects are available in PlaceholderDefaults, including shimmer, fade, pulse, circular reveal, and light reveal.

Example usage:

// Basic placeholder with default fade effect
Text(
  text = userName,
  modifier = Modifier.placeholder(visible = isLoading)
)

// Customized placeholder with shimmer effect
Image(
  painter = profileImage,
  contentDescription = "Profile",
  modifier = Modifier
    .size(100.dp)
    .placeholder(
      visible = isLoading,
      color = Color.LightGray,
      shape = CircleShape,
      highlight = PlaceholderDefaults.shimmer
    )
)

// Placeholder without highlight animation
Card(
  modifier = Modifier.placeholder(
    visible = isLoading,
    highlight = null
  )
)

Parameters

See also