Anyone know how to use accompnist/coil + `Crossfade()`? The <docs> state that you CAN crossfade, bu...

# compose

[Colton Idle]

Anyone know how to use accompnist/coil + Crossfade()?

The docs state that you CAN crossfade, but not exactly how? I also looked at Owl sample app but didn't see usage of crossfade either.

[Albert Chang]

Something like

val painter = rememberCoilPainter(request = request)
Crossfade(targetState = painter.loadState is ImageLoadState.Success) { success ->
    if (success) Image(painter = painter, contentDescription = contentDescription)
}

[cb]

If you want to use Compose Crossfade then Albert’s answer is correct.

[Colton Idle]

I didn't even realize compose had Crossfade. I was originally talking about coils Crossfade though

[Colton Idle]

From the original coil docs:


Requests can be configured with an optional trailing lambda:

imageView.load("<https://www.example.com/image.jpg>") {
    crossfade(true)
    placeholder(R.drawable.image)
    transformations(CircleCropTransformation())
}

Anyone know how I would use coil crossfade, or does it not make sense in a compose world and I should instead use composes crossfade?

[cb]

Coil’s crossfade doesn’t work in Accompanist as we don’t currently implement the special Target interface required. Any reason why you’re not using fadeIn?

[Colton Idle]

Just seemed quicker to be able to add a quick Crossfade = true boolean. 😁

So if I want to do it in the supported way should I use fadeIn or crossFade?

[Colton Idle]

Was finally able to circle back to this. Ideas why my placeholder doesn't show?

val painter = rememberCoilPainter(request = imageUrl)

Crossfade(targetState = painter.loadState) {
    when (it) {
        ImageLoadState.Empty -> {}
        is ImageLoadState.Loading -> {
            Spacer(modifier = Modifier.matchParentSize().background(Color(0xffff0000)))
        }
        is ImageLoadState.Success -> {
            Image(
                painter = painter,
                contentDescription = null,
                contentScale = ContentScale.Crop,
                alpha = alpha)
        }
        is ImageLoadState.Error -> {}
    }
}

[cb]

Because the parent Crossfade doesn’t have a size? The match parent size is probably resolving to 0,0