How to display a progress bar while an image loads with Coil?

edit

You can achieve this by using the RequestBuilder class in Coil. First, create a RequestBuilder and set the URL of the image you want to load. Then, create a ProgressBar and set its visibility to VISIBLE to show it on the screen while the image is loading. Finally, set a listener on the RequestBuilder to hide the ProgressBar when the image is loaded. Here's an example code:

val imageRequest = ImageRequest.Builder(context)
    .data(imageUrl)
    .build()

val requestBuilder = Coil.imageLoader(context).enqueue(imageRequest) {
    target(onSuccess = { result ->
        // The image has loaded successfully, hide the progress bar
        progressBar.visibility = View.GONE
        imageView.setImageDrawable(result)
    }, onError = { error ->
        // Handle the error
    })
}

// Show the progress bar while the image is loading
requestBuilder.addLifecycleListener(
    object : LifecycleObserver {
        @OnLifecycleEvent(Lifecycle.Event.ON_START)
        fun onStart() {
            progressBar.visibility = View.VISIBLE
        }
    }
)

Note that in this example, imageView is the ImageView where you want to display the loaded image, and progressBar is the ProgressBar to show while the image is loading. Also, make sure to add the Coil dependency to your project.