I have looked at some tutorials for implementing shimmer loading in compose but can't decide the bes...

# compose

[Philip S]

I have looked at some tutorials for implementing shimmer loading in compose but can't decide the best way to set it up code wise.

@Composable
fun MyList(items: List<Items>, isLoading: Boolean)

I thought about using a flag as shown above and then if-else to determine if it should show the real view or just the shimmer variant. If you have implemented shimmer loading what worked best for you? Did you perhaps find a more elegant solution?

[patrick]

Not sure how your Shimmer is implemented, but I think a shimmer modifier would be amazing. Something like .shimmer(isLoading = true).

Not sure how feasible it is, but would be very handy to just drop this on composables and have a shimmer overlay the composable or so (while keeping all shimmer modifier animations in sync.

[Philip S]

Modifier sounds like a good idea then i might not even need to have 2 versions of the same layout. I will try it

[patrick]

If you get something working I would be very interested in how you implemented it 😄

[Boris Kachscovsky]

At monzo we implemented a shimmer modifier

fun Modifier.shimmer(
    gradientAngle: Float = ShimmerAngle,
    gradientWidth: Float = ShimmerWidth,
    alphaLight: Float = ShimmerAlphaLight,
    alphaDark: Float = ShimmerAlphaDark,
): Modifier = this.then(
    composed {
        val animatedValue by rememberInfiniteTransition().animateFloat(
            initialValue = 0.0f,
            targetValue = 1.0f,
            animationSpec = ShimmerAnimationSpec
        )

        ShimmerModifier(
            animatedVal = animatedValue,
            isLight = Theme.isLight,
            gradientAngle = gradientAngle,
            gradientWidth = gradientWidth,
            alphaLight = alphaLight,
            alphaDark = alphaDark,
        )
    }
)

The Modifier itself is a class that extends DrawCacheModifier, and draws the gradient based on the animated value passed in.

[Boris Kachscovsky]

We then just create boxes and show then when the view should be loading

[Philip S]

Is that code open source somewhere?

[patrick]

@Philip S just discovered this: https://github.com/kazemihabib/compose-shimmer

A bit out of date, but looks quite good