foundation/io.github.fornewid.placeholder.foundation/placeholder

placeholder

fun Modifier.placeholder(visible: Boolean, color: Color, shape: Shape = RectangleShape, 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'.

A version of this modifier which uses appropriate values for Material themed apps is available in the 'Placeholder Material' library.

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

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 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.

shape

desired shape of the placeholder. Defaults to RectangleShape.

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.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import io.github.fornewid.placeholder.foundation.PlaceholderHighlight
import io.github.fornewid.placeholder.foundation.fade
import io.github.fornewid.placeholder.foundation.placeholder
import io.github.fornewid.placeholder.foundation.shimmer

fun main() { 
   //sampleStart 
   Text(
    text = "Content to display after content has loaded",
    modifier = Modifier
        .padding(16.dp)
        .placeholder(
            visible = true,
            color = Color.Gray,
            // optional, defaults to RectangleShape
            shape = RoundedCornerShape(4.dp),
        ),
) 
   //sampleEnd
}