Remote Image Not Displaying in Showcase Using Coil's AsyncImage

[narayan07feb]

In my component, I am using Coil's AsyncImage. However, everything except for the image appears in the Showcase. I have tried the same component in my code, and it displays everything correctly. Does the Showcase support AsyncImage?

[sjaramillo10]

A little bit more information here. Android Studio's preview does not load the image from the network (which is kinda expected) but it shows AsyncImage's placeholder correctly. The placeholder is a local drawable.

Showkase does not load the image from the network, but it also does not show the placeholder.

[vinaygaba]

@narayan07feb @sjaramillo10 I suspect this might be because internet permission isn't added to the ShowkaseBrowserActivity manifest by the library. However, you can solve this on your end by making sure internet permissions are added to your manifest. There's an example of this available where the sample app actually has a network based image that loads correctly in the Showkase Browser. It's because the sample module adds the permission correctly - https://github.com/airbnb/Showkase/blob/master/sample/src/main/AndroidManifest.xml#L4. Let me know if this makes sense

[sjaramillo10]

Thanks for the suggestion @vinaygaba, however we had already configured the internet permission in the Manifest and the issue persists. Not sure if the issue is with Showkase itself, or with how Coil works that is not compatible with how we are using Showkase.

Not sure if there is any value in keeping this issue open, so feel free to close it out if you prefer. Thanks again!

[vinaygaba]

@sjaramillo10 Can you fork this repo and swap out the picasso dependencies from the sample module to Coil - https://github.com/airbnb/Showkase/blob/master/sample/build.gradle#L113

If there's issue with the library, it should be a straightforward repro and then I can investigate more to root cause it.

[vinaygaba]

@narayan07feb @sjaramillo10 I was able to investigate and I think I know what's going on -

Showkase ensures that it conveys that it's a preview environment here (Correct/Intended behavior) - https://github.com/airbnb/Showkase/blob/e21f7b36554ebfe45642e5f2fcca8291a62660dc/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt#L90

It seems like Coil doesn't work as well in preview environment based on this issue - https://github.com/coil-kt/coil/issues/1915.

However, it looks like progress is being made to fix it - https://github.com/coil-kt/coil/pull/2266

As a temporary workaround, you can wrap your AsyncImage with this CompositionLocal and that should fix the issue -

CompositionLocalProvider(
    LocalInspectionMode provides false,
) {
    AsyncImage(
        model = imageUrl,
        contentDescription = null,
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
    )
}

[sjaramillo10]

Hey @vinaygaba, thanks a lot for looking further into this!

I just tried Showkase + Coil again, and the placeholder shows up correctly in the Showkase app without any extra effort. Not sure why in my initial comment I said placeholders were not working 🤷

The model, error and fallback images do not show up though (which is the same behavior as the AS preview).

I tried out your CompositionLocalProvider suggestion and the remote images load correctly in the Showkase app 🙌

Given that a proper fix is soon to be released by Coil, we can wait for it and won't modify our production code to fix image previews.

Thanks once again! 🎉