Support Fade Through Transparent transitions in Compose.

[Adam Copp]

Is your feature request related to a problem? Please describe.
Material Design specifies Fade Through transitions in many places, not Crossfade transitions. Jetpack Compose Coil does not appear to support Fade Through. The documentation suggests that you can observe the painter's state to do custom transitions, but without the painter being placed into an Image it won't attempt to load, so the loading state displays forever.

Describe the solution you'd like
A fadethrough builder method on ImageRequest and ImageRequestDefaults. This builder would be respected in Compose as well as in Views.

Alternately, AnimatedContent support in SubcomposeAsyncImage, with an optional parameter which allows the user to specify the transition passed to AnimatedContent.

Additional context
I'm happy to try contribute this, but the contributions page makes it clear that drive-by feature PRs are not welcome.

[Colin White]

The painter won’t load until it’s rendered in an Image because it’s waiting for a target size. Setting a custom size/SizeResolver should allow the request to proceed.

In terms of supporting fade through, I’d probably err on the side of not adding this to the core artifact. Though, we could revisit this later if there’s a lot of demand. If you need this for your project I’d recommend observing the painter’s state or using the transform argument in AsyncImage to wrap the success painter in a custom painter similar to how it’s done internally with CrossfadePainter.

[Adam Copp]

Thanks for your reply :)

I think I'm in a bit of a tricky situation where none of the existing options are great fits for me:

• My loading state is animated and depends on animation state progress from a CompositionLocal to synchronize with other elements on the screen, so I need SubcomposeAsyncImage to give me the ability to use a @composable loading state.
  ** SubcomposeAsyncImage with @composable loading paramters don't support transform, so I don't think I can use a custom Painter to solve this.
• To get the correct size, I'd need to subcompose. At that point I'd be essentially rewriting SubcomposeAsyncImage.

I've tried just putting a Modifier.alpha(0f) Image into the State.Loading branch of my when when I'm observing the painter state in order to get the correct size and trigger loading, but then I always see the entrance animation when the Composable enters the composition, even if the image is cached in memory. Presumably because swapping between different Image composables in each branch causes flip-flopping in the loading state.

[Colin White]

The AsyncImagePainter always starts in the loading state. Check out here for more info: https://coil-kt.github.io/coil/compose/#observing-asyncimagepainterstate

If you’re using SubcomposeAsyncImage your best bet is to create a fade through animation using the Compose animation APIs. You can use the content argument, painter.state, and SubcomposeAsyncImageContent to control how the image content is rendered based on the painter’s state.

Going to close this out as I think this fits best as a custom implementation.