Conditional: shimmer

A band of light that sweeps an element again and again while a condition is true.

Shimmer sweeps a soft band of light across the pixels an element draws, rests for a moment, and sweeps again for as long as a condition holds. Use it on placeholder blocks while data loads. To cover real content with a placeholder that gives way when loading ends, use kapowSkeleton.

Usage

The sample shimmers a card’s placeholder blocks while it loads.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.ConditionalEffect
import com.jantursky.kapow.conditionalEffect

@Composable
fun LoadingBlock(loading: Boolean) {
    Box(
        Modifier
            .size(width = 220.dp, height = 64.dp)
            .conditionalEffect(loading, ConditionalEffect.shimmer())
            .clip(RoundedCornerShape(12.dp))
            .background(Color(0xFFD9DCE3)),
    )
}

Parameters

Parameter	Default	Description
`color`	`Color.White.copy(alpha = 0.4f)`	The band. Its alpha is how bright the band gets at its middle.
`angle`	`20f`	Direction the band travels, in degrees clockwise from pointing right.
`duration`	`1500.milliseconds`	How long one sweep takes.
`bandWidth`	`0.4f`	Width of the band, as a fraction of the element’s length along the sweep.
`softness`	`1f`	How soft the band’s edges are, above 0 and at most 1. Lower values look harder edged.
`pause`	`400.milliseconds`	How long the element rests between two sweeps.
`blendMode`	`BlendMode.SrcAtop`	How the band blends with the element. The default keeps it on the element’s own pixels.

Reduced motion

The element is lightened evenly while the condition holds, and no band travels.

Notes

The band only lights the element’s own pixels, so a rounded or transparent element is not given a square glow.
When the condition turns false the band fades out over 200 ms. Change that with fadeOut.
speed scales the sweep and the pause together.
Nothing recomposes while the band moves.

Conditional: shimmer

Usage

Parameters

Reduced motion

Notes

Live example