How to detect when ImagePainter loads photo from web using Jetpack Compose?
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 = ""
)
}
}
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 = ""
)
}
}
}