如何检测 ImagePainter 何时使用 Jetpack Compose 从 web 加载照片？

Question

I display images from web by url links. I want to display progress bar until image will be loaded and then hide progress bar and display image. I don't know 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 = ""
                    )
                }
            }

Answer 1

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 = ""
        )
    }
}
}