Skip to main content

Placeholders & Shimmer

AsyncPic provides three built-in placeholder types, controlled by placeholderType.

PlaceholderType​

enum class PlaceholderType {
    SHIMMER,    // Animated shimmer gradient (default)
    SKELETON,   // Pulsing solid block
    NONE        // No placeholder at all
}

Shimmer (Default)​

The default shimmer animates a gradient across the image area while loading.

AsyncPic(
    source = ImageSource.Url("https://example.com/photo.jpg"),
    modifier = Modifier.size(200.dp),
    placeholderType = ImageSource.PlaceholderType.SHIMMER
)

Shimmer Color​

Customize the base shimmer color:

AsyncPic(
    source = ImageSource.Url("..."),
    modifier = Modifier.size(200.dp),
    shimmerColor = Color(0xFFE2E8F0)   // default slate-200
)

🌈 Adaptive Color Morphing​

One of AsyncPic's unique features — the shimmer automatically extracts the dominant color of the loaded image and smoothly transitions the shimmer into that color before the image appears.

This happens automatically! No extra code needed.

Shimmer Directions​

5 directions supported via shimmerDirection:

AsyncPic(
    source = ImageSource.Url("..."),
    modifier = Modifier.size(200.dp),
    shimmerDirection = ImageSource.ShimmerDirection.LTR   // left to right
)
DirectionDescription
DIAGONALTop-left to bottom-right (default)
LTRLeft to right
RTLRight to left
TTBTop to bottom
BTTBottom to top

Skeleton​

A pulsing opacity animation — great for card/list layouts:

AsyncPic(
    source = ImageSource.Url("..."),
    modifier = Modifier.size(200.dp),
    placeholderType = ImageSource.PlaceholderType.SKELETON
)

No Placeholder​

AsyncPic(
    source = ImageSource.Url("..."),
    modifier = Modifier.size(200.dp),
    placeholderType = ImageSource.PlaceholderType.NONE
)

Minimum Shimmer Time​

Control how long the shimmer is shown (even if the image loads fast):

AsyncPic(
    source = ImageSource.Url("..."),
    modifier = Modifier.size(200.dp),
    minShimmerTime = 1500L   // milliseconds, default 1000
)

Custom Placeholder​

Override with any composable:

AsyncPic(
    source = ImageSource.Url("..."),
    modifier = Modifier.size(200.dp),
    placeholder = {
        Box(
            Modifier.fillMaxSize().background(Color.LightGray),
            contentAlignment = Alignment.Center
        ) {
            CircularProgressIndicator()
        }
    }
)

Custom Error State​

AsyncPic(
    source = ImageSource.Url("..."),
    modifier = Modifier.size(200.dp),
    error = {
        Box(
            Modifier.fillMaxSize().background(Color(0xFFFEE2E2)),
            contentAlignment = Alignment.Center
        ) {
            Text("Failed to load", color = Color.Red)
        }
    }
)