CODEWITHSUNDEEP
androidandroid-jetpack-composecoil
daniyelp
daniyelp

Reputation: 1265

Jetpack Compose: Get a callback when the image has finished loading with Coil

I'm loading a pretty large resource image using Coil for Jetpack Compose and it takes some tens of milliseconds to load, even hundreds when the screen is loaded for the first time. I want to not display some parts of the screen if the image isn't loaded yet. I wandered into the rememberImagePainter method's implementation but I couldn't find something to help me.

Upvotes: 5

Views: 6743

Answers (2)

Stephan
Stephan

Reputation: 16739

There is an option to pass a listener in the builder:

rememberImagePainter(data = "url or something", builder = {
    listener(object : ImageRequest.Listener {
        override fun onCancel(request: ImageRequest) {
            ...
        }

        override fun onError(request: ImageRequest, throwable: Throwable) {
            ...
        }

        override fun onStart(request: ImageRequest) {
            ...
        }

        override fun onSuccess(request: ImageRequest, metadata: ImageResult.Metadata) {
            ...
        }
    })
})

However if you just want to show a placeholder image, it's easiest to use the option placeholder(...) which is also available in the builder:

rememberImagePainter(data = "url or something", builder = {
    placeholder(R.drawable.image_placeholder)
})

Upvotes: 3

RaBaKa 78
RaBaKa 78

Reputation: 1445

You can achieve this behavior by using painter.state

val painter = rememberImagePainter(.....)

val painterState = painter.state

Now you can compare the coil states like error, loading, and success very easily

if (painterState is ImagePainter.State.Loading) {
showLoadingDialog()
}

if(painterState is ImagePainter.State.Success) {
showContent()
}

Upvotes: 2

Related Questions