Android COIL loading night placeholder drawable in light mode for an instant

Question

I am using COIL library to load images from URL into ImageView and I am facing an issue when implementing dark mode.

In my app, I have a RecyclerView in which every item has an image. Since the load is asynchronous, I have a placeholder drawable to show until the image is loaded.

The extension function I am using is this:

/**
 * Load image with placeholder and crossfade animation
 */
private fun ImageView.loadImageWithPlaceholder(
    url: String,
    onSuccess: (() -> Unit)? = null,
    onError: (() -> Unit)? = null
) {
    load(url) {
        placeholder(R.drawable.ic_sheikah_placeholder)
        crossfade(Constants.CROSSFADE_DURATION_MILLIS)
        listener(onSuccess = { _, _ ->
            onSuccess?.invoke()
        }, onError = { _, _ ->
            onError?.invoke()
        })
    }
}

Everything was working fine until I implemented dark/light mode, using MaterialComponents theming. Now I have two placeholder images, in drawable-Xdpi and in drawable-night-Xdpi.

In dark mode everything works as intended. But in light mode when I open the Activity with the RecyclerView or when I do a fast scroll, for an instant the placeholder shown is the dark mode one. After that instant, the right placeholder image is shown, and later replaced with the image loaded from the server. I have tried disabling COIL cache but nothing seems to work, and I can't find out where the problem is.

Answer 1

I've encountered the same issue. migrating to coil 2.X solved this issue. https://coil-kt.github.io/coil/upgrading/