I am using Coil for image loading but I am not sure why my Images are reloading when coming back to ...

# compose

[Shakil Karim]

I am using Coil for image loading but I am not sure why my Images are reloading when coming back to the previous screen.

device-2021-10-15-205546.webm

[Michael Paus]

I don’t see any flickering in your video.

[Alex]

Maybe the flickering happens in your eyes and its called blinking @Shakil Karim 🙂

[adjpd]

There is a small pause the second time the screen is loaded. I'm not sure why but maybe try it in a release build with R8?

[Csaba Szugyiczki]

Are you sure your Coil setup is correct? If your setup is correct and you are using on ImageLoader instance which has either Memory cache or the OkHttp client that you set up for it has a cache, then your image should appear almost immediately: https://coil-kt.github.io/coil/getting_started/#singleton

[Shakil Karim]

@Michael Paus I mean the Images are reloading again when I navigate back to the Dashboard screen,

[Shakil Karim]

@Csaba Szugyiczki Yes, I am creating ImageLoader like this

@OptIn(ExperimentalCoilApi::class)
    @Provides
    @Singleton
    fun provideImageLoader(
        @ApplicationContext context: Context,
        @Named("defaultClient") okHttpClient: OkHttpClient,
    ): ImageLoader {

        return ImageLoader.Builder(context)
            .okHttpClient(okHttpClient)
            .crossfade(true)
            .memoryCache(MemoryCache.Builder(context)
                    .strongReferencesEnabled(true)
                    .weakReferencesEnabled(true)
                .maxSizePercent(0.5)
                .build()
            )
            .diskCache(DiskCache.Builder(context)
                .maxSizePercent(0.6)
                .directory(context.cacheDir).build())
            .build()

    }

and Injecting on Application Class

Coil.setImageLoader(imageLoader)

[Csaba Szugyiczki]

Try adding a DebugLogger to your ImageLoader to get more info about whats going on with your image loading
https://coil-kt.github.io/coil/api/coil-base/coil.util/-debug-logger/index.html

[Csaba Szugyiczki]

and make sure the image is not coming back with headers that would instruct Coil to skip caching

[Csaba Szugyiczki]

such as cache-control: no-cache, Coil might try to respect those

[Csaba Szugyiczki]

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

[Shakil Karim]

@Csaba Szugyiczki I have tried with respectCacheHeaders disabled

return ImageLoader.Builder(context)
    .okHttpClient(okHttpClient)
    .respectCacheHeaders(false)
    .crossfade(true)
    .logger(DebugLogger())
    .memoryCache(MemoryCache.Builder(context)
            .strongReferencesEnabled(true)
            .weakReferencesEnabled(true)
        .maxSizePercent(0.6)
        .build()
    )
    .diskCache(DiskCache.Builder(context)
        .maxSizePercent(0.6)
        .directory(context.cacheDir).build())
    .build()

Also, I notice Most of the images are coming from Memory Cache after adding logger so I think, this is not related to Coil but Composing.

[Csaba Szugyiczki]

How big are the images? if you display eg 2000x3000 pixel images on a 400x600 piece of screen that will have a negative impact on how fast they are displayed. Coils cache might be able to first downscale the images and only save the downscaled images

[Shakil Karim]

@Csaba Szugyiczki Yeah I think the image is large but doesn't Coil cache the downscale image and load the downscale cache version?

[Csaba Szugyiczki]

No idea 🤷 You might be able to browse the cache on an emulator

[adjpd]

I just saw something on twitter that said if you're seeing poor performance with coil and lazycolumn you should upgrade to the latest coil.