Image flashes when screen is recomposed

[JohannRosenberg]

I am using animations to show and hide a screen with Jetpack Compose. I have a screen that slides in from the right when it is made visible and then slide it back to the right when the screen is hidden.

Jetpack Compose animations recompose their content both when making the composable visible and invisible.

On the screen that is being animated, I have an Image and use rememberImagePainter and crossfade is set to false.

When the screen is made visible, the image is loaded from the network and is displayed as expected. But when the screen is made invisible by animating off to the right, the image will temporarily flash as the screen is being recomposed.

It is difficult to say what the problem is. It is clear that Jetpack Compose is recomposig the screen and therefore rememberImagePainter is being called again. But why the flashing? If Coil already has loaded the image, why is it not just reloaded from cache without the flash?

[QiannanXu]

meat the same problem. wish any response.

[svenjacobs]

In my case the flashing of images is gone with 2.0.0-alpha05. It occurred when showing/hiding a ModalBottomSheetLayout.

Update: I have to partially withdraw my statement. I see the flashing when interceptorDispatcher(Dispatchers.IO) is configured on ImageLoader.Builder. Without that option there is no flashing.

[colinrtwhite]

@svenjacobs That's intended behaviour Setting interceptorDispatcher(Dispatchers.IO) moves all work to an IO thread - including the memory cache check.

I'm hoping #1048 should resolve most synchronous cache issues. I'm still seeing occasional white flashes when using BoxWithConstraints, though that seems like an issue in Jetpack Compose and is not possible to solve in Coil.

[RobertMenke]

I'm getting this behavior consistently when I use a local drawable (ex: rememberAsyncImagePainter(ContextCompat.getDrawable(context, R.drawable.clock_icon_white_clipped))), but when I use a File I don't experience image flickering.

This seems to happen whether or not I'm using BoxWithConstraints. I'm on 2.0.0-rc01. Happy to invite you to the repo (private) if you want to take a look.

Appreciate all the hard work. Coil is absolutely fantastic ❤️ .

[RobertMenke]

My apologies, I actually just fixed this by switching from using ContextCompat.getDrawable to just providing the resource id.

Converting this

rememberAsyncImagePainter(ContextCompat.getDrawable(context, R.drawable.clock_icon_white_clipped))

into this

rememberAsyncImagePainter(R.drawable.clock_icon_white_clipped)

Fixed the flickering in my case

[mainrs]

The flicking solution you mentioned above does not work for Compose Desktop and coil3. I have the same issues there