Showing a Progress bar while loading image using Coil?

Question

How to show a progress bar while fetching image from URL in Coil.?

Answer 1

Use ImageRequest.Listener

Example:

val imageRequest = ImageRequest.Builder(context)
    .data(url)
    .listener(
        onStart = {
            // set your progressbar visible here
        },
        onSuccess = { request, metadata ->
            // set your progressbar invisible here
        }
    )
    .build()

imageLoader.enqueue(request)

Answer 2

If you are creating app with jetpack compose then you don't need to do manual stuff,

you can use the builtin SubcomposeAsyncImage provided by the library from version 2.0.0-rc01

SubcomposeAsyncImage(
    model = image,
    contentDescription = "",
    loading = { 
        CircularProgressIndicator(color = Color.Black) 
    },
)