Is it possible to do crossfade between different quality versions of the same image on different urls?

[savvasdalkitsis]

The server I'm working with has two different urls for the thumbnail and full quality version of an image.

When displaying the full version, I would like to first display the thumbnail (which has been already cached locally most likely) while the full version downloads.

Is this possible with Coil?

[savvasdalkitsis]

For anyone curious, I managed to get this behavior using two AsyncImages and image loading listeners:

var showLowRes = remember { true }
Box(modifier = Modifier
    .fillMaxSize()
    .background(MaterialTheme.colors.background)
) {
    if (showLowRes) {
        AsyncImage(
            modifier = Modifier
                .fillMaxWidth()
                .align(Alignment.Center),
            model = ImageRequest.Builder(LocalContext.current)
                .data(lowResUrl)
                .build(),
            contentScale = ContentScale.Fit,
            contentDescription = "",
        )
    }
    AsyncImage(
        modifier = Modifier
            .fillMaxWidth()
            .align(Alignment.Center),
        model = ImageRequest.Builder(LocalContext.current)
            .data(fullResUrl)
            .size(Size.ORIGINAL)
            .listener(onSuccess = { _, _ ->
                showLowRes = false
            })
            .build(),
        contentScale = ContentScale.Fit,
        contentDescription = "photo",
    )
}