material3/io.github.fornewid.placeholder.material3/placeholder

placeholder

fun Modifier.placeholder(visible: Boolean, color: Color = Color.Unspecified, shape: Shape? = null, highlight: PlaceholderHighlight? = null, placeholderFadeTransitionSpec: @Composable Transition.Segment<Boolean>.() -> FiniteAnimationSpec<Float> = { spring() }, contentFadeTransitionSpec: @Composable Transition.Segment<Boolean>.() -> FiniteAnimationSpec<Float> = { spring() }): Modifier(source)

Draws some skeleton UI which is typically used whilst content is 'loading'.

To customize the color and shape of the placeholder, you can use the foundation version of Modifier.placeholder, along with the values provided by PlaceholderDefaults.

A cross-fade transition will be applied to the content and placeholder UI when the visible value changes. The transition can be customized via the contentFadeTransitionSpec and placeholderFadeTransitionSpec parameters.

You can provide a PlaceholderHighlight which runs an highlight animation on the placeholder. The shimmer and fade implementations are provided for easy usage.

You can find more information on the pattern at the Material Theming Placeholder UI guidelines.

Parameters

visible

whether the placeholder should be visible or not.

color

the color used to draw the placeholder UI. If Color.Unspecified is provided, the placeholder will use PlaceholderDefaults.color.

shape

desired shape of the placeholder. If null is provided the placeholder will use the small shape set in MaterialTheme.shapes.

highlight

optional highlight animation.

placeholderFadeTransitionSpec

The transition spec to use when fading the placeholder on/off screen. The boolean parameter defined for the transition is visible.

contentFadeTransitionSpec

The transition spec to use when fading the content on/off screen. The boolean parameter defined for the transition is visible.

Samples

import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import io.github.fornewid.placeholder.foundation.PlaceholderHighlight
import io.github.fornewid.placeholder.material3.fade
import io.github.fornewid.placeholder.material3.placeholder
import io.github.fornewid.placeholder.material3.shimmer

fun main() { 
   //sampleStart 
   Text(
    text = "Content to display after content has loaded",
    modifier = Modifier
        .padding(16.dp)
        .placeholder(visible = true),
) 
   //sampleEnd
}