Add a shimmer while loading an image using coil and compose

Question

Loading an image from a web URL and displaying a shimmer during load. Are there any better ways to handle this?

val context = LocalContext.current
val imageLoader = ImageLoader(context)

val request = ImageRequest.Builder(context)
        .data(thumbnailUrl)
        .build()

val painter = rememberImagePainter(
        request = request,
        imageLoader = imageLoader
    )

val state = painter.state

Image(
  painter = painter,
  contentDescription = "thumbnail image",
  modifier = Modifier
            .fillMaxSize()
            .placeholder(
                visible = state is 
  ImagePainter.State.Loading,
                color = PlaceholderDefaults.color(
                    backgroundColor = MyTheme.colors.shimmer.copy(0.1f),
                ),
                highlight = PlaceholderHighlight.shimmer(),
            ),
        contentScale = ContentScale.Crop
    )

How would you add a token to this request? I tried setting the header with a token but no response. Any suggestions?

Unhorse

How about drawing the Shimmer on top of the image ( like an overlay of some sort) but make the shimmer disappear when the image loading state changes. – Postfree

The Modifier.placeholder is not a system modifier, where does it come from? Why are you looking for a better solution, doesn't it work for you? – Vachill

It seems that the question about the token has nothing to do with shimmer. Please don't ask two questions in one, because it will be very difficult for other people to find the answer when they have the same question. You should split it into two questions - edit this one, leaving only one of the questions, and create a second one, also showing how you tried to specify the token. – Vachill

Ok, @PhilipDukhov thanks for pointing it out. I updated my question. I'll create another question for tokens. – Unhorse

Modifier.placeholder is probably coming out from Accompanist Placeholder library. – Viburnum

Answer 1

Google accompanist library makes it very easy to implement by just following few steps.

Step 1. Firstly, setup the library to used by changing respective build.gradle file:

repositories {
    mavenCentral()
}

dependencies {
    // If you're using Material, use accompanist-placeholder-material
    implementation "com.google.accompanist:accompanist-placeholder-material:0.32.0"

    // Otherwise use the foundation version
    implementation "com.google.accompanist:accompanist-placeholder:0.32.0"
}

Step 2. Then you can use the feature with modifier. For shimmer you can follow the code:

import com.google.accompanist.placeholder.PlaceholderHighlight
import com.google.accompanist.placeholder.material.placeholder
import com.google.accompanist.placeholder.material.shimmer

YourComposableHere(
    modifier = Modifier
        .placeholder(
            visible = true,
            highlight = PlaceholderHighlight.shimmer(),
        ),
    //...
) {
    // Body if any...
}

You can also check the latest version and docs(reference) at: https://google.github.io/accompanist/placeholder/

Now, we have to just change the isVisible parameter of .placeholder() to show and hide the shimmer based on the image loading state as you have done in question.

Are there any better ways to handle this?

It is very simple and clean so I think it's the best method currently.

Fluviomarine