SushiShimmer

A composable that displays a shimmer loading effect over placeholder content.

SushiShimmer creates a shimmering animation effect typically used to indicate loading states in UI. It provides a scope that allows creating shimmer effects over custom shapes and text elements.

Example

The SushiShimmer component is used to create loading state indicators with customizable animations:

// Basic shimmer with default properties
SushiShimmer(
    props = SushiShimmerProps(),
    modifier = Modifier.fillMaxWidth()
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        // Header with circle and text
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            ShimmerItem(
                Modifier
                    .size(50.dp)
                    .clip(CircleShape)
            )
            Column {
                ShimmerItem(
                    Modifier
                        .height(16.dp)
                        .width(150.dp)
                        .clip(RoundedCornerShape(4.dp))
                )
                Spacer(modifier = Modifier.height(8.dp))
                ShimmerItem(
                    Modifier
                        .height(12.dp)
                        .width(100.dp)
                        .clip(RoundedCornerShape(4.dp))
                )
            }
        }

        // Content
        ShimmerItem(
            Modifier
                .fillMaxWidth()
                .height(120.dp)
                .clip(RoundedCornerShape(8.dp))
        )
    }
}

// Shimmer with custom colors and animation parameters
SushiShimmer(
    props = SushiShimmerProps(
        bgColor = SushiTheme.colors.blue.v100,
        animationColor = SushiTheme.colors.blue.v300,
        animationDuration = 800,
        animationDelay = 0
    ),
    modifier = Modifier.fillMaxWidth()
) {
    // Your shimmer content here
}

// Shimmer with text elements
SushiShimmer(
    props = SushiShimmerProps(),
    modifier = Modifier.fillMaxWidth()
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        ShimmerText(
            sushiTextProps = SushiTextProps(
                text = "This is a shimmer text headline",
                type = SushiTextType.Bold700
            ),
            modifier = Modifier.fillMaxWidth()
        )

        ShimmerText(
            sushiTextProps = SushiTextProps(
                text = "This is a longer paragraph text that demonstrates how the shimmer effect works.",
                type = SushiTextType.Regular400
            ),
            modifier = Modifier.fillMaxWidth()
        )
    }
}

Component API

SushiShimmerProps

Parameter	Description
bgColor	The background color of the shimmer effect
animationColor	The highlight color that moves across the shimmer
animationWidth	The width of the highlight gradient in dp
angleOffset	The angle offset of the gradient to create diagonal effects
animationDuration	The duration of one complete animation cycle in milliseconds
animationDelay	The delay between animation cycles in milliseconds

SushiShimmerScope

Within the SushiShimmer content lambda, you have access to these functions:

Function	Description
ShimmerItem(modifier: Modifier)	Creates a generic shimmer item with the specified modifier. This can be used to create placeholder shapes with the shimmer effect.
ShimmerText(sushiTextProps: SushiTextProps, modifier: Modifier)	Creates a shimmer text with the specified text properties and modifier. This applies the shimmer effect to text content.