White background

[Anna Shikhshabekova]

Please complete the following information:

• Library Version [v2.2.2]
  implementation 'com.github.skydoves:landscapist-glide:2.2.2'
  implementation 'com.github.skydoves:landscapist-coil:2.2.2'
  implementation 'com.github.skydoves:landscapist-placeholder:2.2.2'

• Affected Device(s) [Not a device specific]

Describe the Bug:

I've tried GlideImage and CoilImage. Both show white background when image loading. It appears before loading placeholder:
error placeholder -> white background -> loading placeholder -> loaded image
There is no white background when using coil or glide compose instead

Sample code

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ImageTestTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    MainScreen()
                }
            }
        }
    }
}

@Composable
private fun MainScreen() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        var imageRes by remember { mutableStateOf("") }
        key(imageRes) {
            CoilImage(
                modifier = Modifier
                    .height(300.dp)
                    .fillMaxWidth(),
                imageModel = remember { { imageRes } },
                imageOptions = remember {
                    ImageOptions(
                        contentScale = ContentScale.Crop,
                    )
                },
                previewPlaceholder = R.drawable.ic_empty_image,
                component = rememberImageComponent {
                    +ShimmerPlugin(
                        baseColor = Color.DarkGray,
                        highlightColor = Color.LightGray
                    )
                    +PlaceholderPlugin.Failure(painterResource(id = R.drawable.ic_broken_image))
                },
            )
        }
        Button(
            onClick = remember { { imageRes = Generator.generate() } } ) {
            Text(text = "Update")
        }
    }
}

object Generator {
    private val list = listOf(
        "https://proprikol.ru/wp-content/uploads/2019/08/kartinki-nyashnye-kotiki-16.jpg",
        "https://www.wallpaperflare.com/static/688/210/437/landscape-nature-sunset-river-wallpaper.jpg",
        "https://i.pinimg.com/736x/d1/db/93/d1db93fed23ae10972bfac57406142a9.jpg"
    )

    fun generate(): String = list.random()
}

Video sample (slowing)

lv_0_20230711120747.mp4

Expected Behavior:

error placeholder -> loading placeholder -> loaded image

[Jaewoong Eum]

@taasonei I think this result is an expected result because Landscapist doesn't compose everything from the first, it observes the state and compose each different composables depending on its state.

Let me think if there's a great way to make the transition smooth with fade animation or something.

[Jaewoong Eum]

@taasonei I'm wondering what if you use the Crossfade over GlideImage like the sample below?

Crossfade(targetState = imageRes, label = "") { image ->
        CoilImage(
        )
..

[Anna Shikhshabekova]

@skydoves looks like there is no difference when I add Crossfade, white background's still visible

[Azlan Jamal]

any update on this issue?

[Jaewoong Eum]

Hey guys, @taasonei @aznj I wonder if this issue occurs only when the error placeholder is displayed first.

[Joe Acosta]

A similar thing is happening for me. It's a gray box that appears every time before the loading preview appears. There's no error placeholder being shown. It's especially jarring while scrolling in a grid with multiple items because you see a lot of gray boxes really quickly and then the loading state/image.

I think this could be the same issue but our apps have different default color schemes? Not sure though

[Jaewoong Eum]

Hey @JayyyR, sorry for the delayed response. Do you use a shimmering effect or what placeholder do you use?

It would be really helpful to debug if you could share the imageComponent implementation on your project. Thanks!