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

I didn't work with Coil, but I suggest you may do the next:

// Before request run on the needed method
yourProgressbar.visibility = View.VISIBLE

val request = ImageRequest.Builder(context)
.data("https://www.example.com/image.jpg")
.target { drawable ->
    yourProgressbar.visibility = View.INVISIBLE
}.build()   

val disposable = imageLoader.enqueue(request)

Here is official doc's example

Answer 2

I tried only in Compose but I think you can use it like Glide

Set the progress bar as placeholder

val circularProgressDrawable = CircularProgressDrawable(this)
circularProgressDrawable.strokeWidth = 5f
circularProgressDrawable.centerRadius = 30f
circularProgressDrawable.start()

imageView.load("https://www.example.com/image.jpg") {
    crossfade(true)
    placeholder(circularProgressDrawable)
    transformations(CircleCropTransformation())
}

Answer 3

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)