How to detect when ImagePainter loads photo from web using Jetpack Compose?

user_14484351 0
Viewed 511

I want to display web images by URL links. I want to display progress bar until image will be loaded and then hide progress bar and display image. How to detect when painter loaded image?

HorizontalPager(count = photoUrlList.size, state = photoPagerState) { page ->
    var shouldBeProgressBarDisplayed by mutableStateOf(true)

    val painter = rememberImagePainter(photoUrlList[page], builder = {
        this.listener(
            onSuccess = { request, ex ->
                shouldBeProgressBarDisplayed = false
            })
    })

    if (shouldBeProgressBarDisplayed) {
        ProgressBar()
    } else {
        Image(
            painter = painter,
            modifier = Modifier
                .padding(vertical = 100.dp)
                .fillMaxSize(),
            contentScale = ContentScale.Crop,
            contentDescription = ""
        )
    }
}
android-jetpack android-jetpack-compose kotlin android
1 Answers

You can use painter.state to achieve this

HorizontalPager(count = photoUrlList.size, state = photoPagerState) { page ->
Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(vertical = 100.dp)
) {
    val painter = rememberImagePainter(
        data = photoUrlList[page],
        builder = {
            crossfade(500)
    })

    val painterState = painter.state

    if (painterState is ImagePainter.State.Loading) {
        CircularProgressIndicator(
            modifier = Modifier.align(Alignment.Center),
            color = MaterialTheme.colors.secondary
        )
    } else {
        Image(
            painter = painter,
            modifier = Modifier
                .fillMaxSize(),
            contentScale = ContentScale.Crop,
            contentDescription = ""
        )
    }
}
}
user_155849640
Related