Flickers when image changes

[mega-ht]

When model (ImageRequest) changes in ZoomableAsyncImage, it causes a blinking glitch. I've tried Coil's default AsyncImage, and another subsampling library , both loads the new image without flickering. Is there any config in telephoto to avoid this?

val request = ImageRequest.Builder(LocalContext.current)
            .data(imagePath)
            .memoryCacheKey(imagePath)
            .placeholderMemoryCacheKey(previousImagePath)

Please let me know if you need more information. Thank you.

[saket]

That doesn't sound good. Can you help me reproduce this in the sample app?

[mega-ht]

Thanks for the fast response. I've forked the repository and updated the sample app here:
https://github.com/mega-ht/telephoto/tree/flicker-issue [ Commit ]
Hope it helps.

[mega-ht]

Here's a screen record for reference:

Screen_Recording_20241125_180915_Telephoto.mp4

cc @saket

[saket]

Your reproducer was helpful, thanks! I I wasn't expecting developers to load preview and full images as two distinct requests. There are two issues here that will need to be fixed:

1. ZoomableImageSource.coil() resets the image state to a null value every time the request changes. This should be updated to start with a null value initially but retain the current value for subsequent requests.
2. SubSamplingImage() does not render anything until the image is read from the disk, even if the placeholder image is available.

I'll take a look at these soon.

[hm-tamim]

Thank you.
I think after this issue is resolved, it will be easier to retain zoom level and pan position when high resolution image with same aspect ratio is loaded.

[saket]

Yep. Wanna help me with that? #104 (comment)

[hm-tamim]

I would love to. However, I recently came across this library and am not fully familiar with its implementation yet. If you could give me to some clues where to start and a draft plan/idea, I can give it a try over the weekends.

[saket]

I'll be happy to guide you! My recommendation would be to start by adding a test in ZoomableTest.kt that:

1. Displays a zoomable image using Modifier.zoomable() and Image(Painter)
2. Performs zoom by, say, double-clicking
3. Updates the painter with a larger image of the same aspect ratio
4. Verifies that the zoom level is retained with the new image size
5. Take before and after screenshots

Sending a PR with a failing test would be a good start.

[mega-ht]

Noted.

I also wanted to share one of my observations:

    AsyncImage(
      model = imageRequest,
      contentDescription = "Image Preview",
      modifier = Modifier
        .fillMaxSize()
        .zoomable(
          state = rememberZoomableState()
        )
    )

When zoomable(...) modifier is used on Coil's AsyncImage, it doesn't flicker and also retains the zoom when high-res image is loaded. Both issues occur only when ZoomableAsyncImage is used, which renders image using SubSamplingImage

In this video, 3 images are loaded without flicking and losing zoom level. Thumbnail > smallSize > fullSize.
https://github.com/user-attachments/assets/dff427ce-3e97-42ef-aa06-30de737166d2

[mega-ht]

Thanks a lot for fixing flickering issue @saket. When can we expect a release for it? A snapshot would work as well.

And looks like zoom level is retained, only the position/pan offset is lost when high res image is loaded.
https://github.com/user-attachments/assets/3979ba8c-c3a1-433f-a56d-3d8fd6496924

[saket]

This should be available in today's snapshot build 0.15.0-SNAPSHOT. Can you give it a try?

[mega-ht]

Snapshot worked, thank you!