Flickering image on each recomposition (custom fetcher/keyer)

[MFlisar]

I do use a custom fetcher that internally calls 2 sub fetchers and combines the result of them. It should draw a large image and overlays it with an icon at the bottom right.

Questions

Why does my composable flicker on each recomposition? I do provide a fitting Keyer for my model and this keyer does provide a stable key - still I see flicker on each recomposition...

Side note: there is no flicker for links that do not have a preview image but only an icon (the 3rd case below ['else if (iconDrawable != null)']) - it seems to be related to my fetcher - what am I doing wrong here?

1) display compasable

@Composable
private fun Link(
    link: Link,
    size: Dp
) {
    val context = LocalContext.current

    AsyncImage(
        model = LinkIconData(context, link),
        contentDescription = null,
        contentScale = ContentScale.Crop,
        modifier = Modifier.size(size)
    )

2) fetcher

class LinkIconData(
    val urlImage: Uri?,
    val urlIcon: Uri?,
    val overlayIconSizeFactor: Float = .25f
) {
    constructor(
        context: Context,
        link: Link,
        overlayIconSizeFactor: Float = .25f
    ) : this(link.getImage(context), link.getIcon(context), overlayIconSizeFactor)

    val key: String = "LinkIconData::$urlImage::$urlIcon::$overlayIconSizeFactor"
}

class LinkIconFetcher(
    val data: LinkIconData,
    private val options: Options,
    private val imageLoader: ImageLoader
) : Fetcher {

    override suspend fun fetch(): FetchResult {

        val iconSize = IntSize(
            (options.size.width.pxOrElse { 0 } * data.overlayIconSizeFactor).toInt(),
            (options.size.height.pxOrElse { 0 } * data.overlayIconSizeFactor).toInt()
        )

        // 1) get urls
        val urlImage = data.urlImage
        val urlIcon = data.urlIcon

        // 2) create options for sub fetchers
        var optionsImage = options
        var optionsIcon = options.copy(size = Size(iconSize.width, iconSize.height))
        // update the disk key for each option (necessary???)
        optionsImage = optionsImage.copy(diskCacheKey = urlImage?.let { imageLoader.components.key(it, optionsImage) })
        optionsIcon = optionsIcon.copy(diskCacheKey = urlIcon?.let { imageLoader.components.key(it, optionsIcon) })

        L.d { "url = $urlImage | urlIcon = $urlIcon" }

        // 3) 
        if (urlImage != null && urlIcon != null) {

            L.d { "fetching urls... (Link: ${data.link.url})" }
            val fetchResultImage = FetcherUtil.fetchUrl(imageLoader, optionsImage, urlImage)
            val fetchResultIcon = FetcherUtil.fetchUrl(imageLoader, optionsIcon, urlIcon)
            L.d { "fetching urls done" }

            L.d { "image = $fetchResultImage | icon = $fetchResultIcon" }

            val imageDrawable = FetcherUtil.getDrawable(optionsImage, fetchResultImage)
            val iconDrawable = FetcherUtil.getDrawable(optionsIcon, fetchResultIcon)

            L.d { "imageDrawable = $imageDrawable | iconDrawable = $iconDrawable" }
            
            if (imageDrawable != null && iconDrawable != null) {
                val finalDrawable = LayerDrawable(arrayOf(imageDrawable, iconDrawable)).apply {
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                        setLayerSize(1, iconSize.width, iconSize.height)
                        setLayerGravity(1, Gravity.BOTTOM or Gravity.END)
                    } else {
                        val insetLeft = options.size.width.pxOrElse { 0 } - iconSize.width
                        val insetTop = options.size.height.pxOrElse { 0 } - iconSize.height
                        setLayerInset(1, insetLeft, insetTop, 0, 0)
                    }
                }
                return ImageFetchResult(
                    image = finalDrawable.asImage(),
                    isSampled = false,
                    dataSource = DataSource.NETWORK
                )

            } else if (imageDrawable != null) {
                return fetchResultImage ?: throw Exception("Error image")
            } else if (iconDrawable != null) {
                return fetchResultIcon ?: throw Exception("Error icon")
            } else {
                throw Exception("no drawables found")
            }
        } else if (urlIcon != null) {
            return FetcherUtil.fetchUrl(imageLoader, optionsIcon, urlIcon)
                ?: throw Exception("Error fetching urlIcon")
        } else if (urlImage != null) {
            return FetcherUtil.fetchUrl(imageLoader, optionsImage, urlImage)
                ?: throw Exception("Error fetching url")
        } else {
            throw Exception("no url or icon found")
        }
    }

    class Factory : Fetcher.Factory<LinkIconData> {
        override fun create(
            data: LinkIconData,
            options: Options,
            imageLoader: ImageLoader,
        ): Fetcher {
            return LinkIconFetcher(data, options, imageLoader)
        }
    }

    class Keyer : coil3.key.Keyer<LinkIconData> {
        override fun key(data: LinkIconData, options: Options): String {
            return data.key
        }
    }

}

3) util class

object FetcherUtil {
    suspend fun fetchUrl(imageLoader: ImageLoader, options: Options, url: Uri): FetchResult? {
        try {
			val data = imageLoader.components.map(url, options)
			val output = imageLoader.components.newFetcher(data, options, imageLoader)
			val (fetcher) = checkNotNull(output) { "no supported fetcher" }
			return fetcher.fetch()
        } catch(e: Exception) {
            return null
        }
    }
}

4) My coil setup looks like following:

fun init() {
        SingletonImageLoader.setSafe { context ->
            ImageLoader.Builder(context)
                .crossfade(false)
                .components {
                    add(FolderIconFetcher.Factory())
                    add(FolderIconFetcher.Keyer())
                    add(LinkIconFetcher.Factory())
                    add(LinkIconFetcher.Keyer())
                }
                //.allowHardware(false)
                .build()
        }
    }

[colinrtwhite]

I would double check that the requests are being served by the memory cache. If they are I would try adding a equals/hashCode implementation to LinkIconData.

[MFlisar]

if I use the sub fetchers results everything is served from MEMORY_CACHE, the combined result is always served from MEMORY. After changing LinkIconData to a data class (so that it has a valid equal/hash funtion) nothing in this logic changes - but the flicker stops...

It seems like I just skip the recomposition this way - why? Shouldn't the Keyer be used to detect equality of data?

Do you see another issue why my combined image is not cached in memory?