Image blinks on opening

[kmnaseef]

Image blink once just after opened.

[saket]

Please add some more context in the form of a video or code to reproduce. It's hard to tell what's happening otherwise.

[AleksandarIlic]

It seems that .listener() is causing blinking. On my end it's blinking/flashing all the time.

val zoomSpec = ZoomSpec(maxZoomFactor = 4.0f)
val zoomableImageState = rememberZoomableImageState(rememberZoomableState(zoomSpec = zoomSpec))
ZoomableAsyncImage(
    modifier = modifier,
    state = zoomableImageState,
    model = ImageRequest.Builder(LocalContext.current)
        .data(imageUrl)
        .placeholderMemoryCacheKey(imageUrl)
        .crossfade(IMAGE_CROSSFADE_DURATION)
        .listener()
        .build(),
    contentDescription = null,
)

If I remove .listener() everything works fine.

Is there any other way to get notified when the image is loaded?

[saket]

From what I understand, this is happening because listener() is creating a new object on every recomposition, making telephoto think that the ImageRequest was changed. You'll need to remember your listener object (example).

I wonder how Coil is able to avoid this. Does AsyncImage not suffer from this problem?

[AleksandarIlic]

Thanks for the link.

I never had blinking problem with Coil. I'm using SubcomposeAsyncImage which also provides custom loading, error and success composable functions to render the states and it's really nice feature to have.

[saket]

Yep that's indeed nice to have. I want to explore if I can offer something similar in the future, but for now you're restricted to managing the loading & error states yourself.

[kmnaseef]

@saket , @AleksandarIlic thanks for the reply and sorry for late response. I am using ZoomableAsyncImage inside a HorizontalPager. When I add/remove images from the 'imageUriList', Image blinks. But Coil doesn't have this issue

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ImageViewerScreen(
    imageUriList: List<Uri>
){
    val context = LocalContext.current
    val state = rememberPagerState(initialPage = 0, 0f) { imageUriList.size }

    HorizontalPager(
        key = { pos ->
            imageUriList[pos]
        },
        state = state,
        modifier = Modifier.fillMaxSize()

    ){ page ->

        ZoomableAsyncImage(
            modifier = Modifier.fillMaxSize(),
            model = imageUriList[page],
            contentDescription = "",
            imageLoader = ImageLoader.Builder(context)
                .components {
                    add(ImageDecoderDecoder.Factory())
                    add(SvgDecoder.Factory())
                }
                .build()
        )
    }
}

[saket]

I wonder if it's because you're creating a new ImageLoader for each image. Does hoisting and remembering your loader change anything?

val context = LocalContext.current
val state = rememberPagerState(initialPage = 0, 0f) { imageUriList.size }
val imageLoader = remember {
    ImageLoader.Builder(context)
        .components {
            add(ImageDecoderDecoder.Factory())
            add(SvgDecoder.Factory())
        }
        .build()
}
HorizontalPager(
    key = { pos ->
        imageUriList[pos]
    },
    state = state,
    modifier = Modifier.fillMaxSize()
) { page ->
    ZoomableAsyncImage(
        modifier = Modifier.fillMaxSize(),
        model = imageUriList[page],
        contentDescription = "",
        imageLoader = imageLoader,
    )
}

[kmnaseef]

Thank you very much @saket, that was the issue. Now everything work perfect