Progress not displayed correctly

[buszi]

I've added CircularProgressIndicator to the onLoading lambda of KamelImage. It seems to be displayed correctly only for the first resource, but when switching to a different one, it is displayed for a couple of milliseconds before lagging and then displaying the new resource.

The app is downloading a random resource of cat (can be image, can be gif). It displays general loading dialog that takes the whole screen when receiving the url of resource. Then passes it to the KamelImage which loads the actual resource.

Here the usage of Kamel

            KamelImage(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxWidth()
                    .padding(20.dp),
                resource = { asyncPainterResource(data = viewState.imageUrl) },
                contentDescription = null,
                onLoading = {
                    CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
                },
                onFailure = { cause ->
                    Text(
                        modifier = Modifier.align(Alignment.Center),
                        text = cause.message ?: "Could not download image",
                    )
                },
            )

And here recording of such behavior:

https://github.com/user-attachments/assets/aa601346-d66b-450a-82d2-9ae86d850a44

Kamel 1.0.0-beta.7 Kotlin 2.0.0 Ktor 3.0.0-beta-2 KMP Compose 1.6.11 Checked on Desktop, Android and iOS platforms and all of them look like this

[luca992]

I tried to duplicate having the a CircularProgressIndicator fail to show up when switching gifs with:

var gifIndex by remember { mutableStateOf(0) }
Button(onClick = { gifIndex = (gifIndex + 1) % 3 }) {
    Text("Change Gif")
}
val gifUrls = listOf<String>(
    "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNDl2OTFjYWVhMmR2aHZuMXcwczh3eXpxeHNlb2xzZXNqZnUzNHU3aSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/da17TWjELQ27RpHXds/giphy.gif",
    "https://i.giphy.com/9viq4F7KgY9WM.gif",
    "https://i.giphy.com/g01ZnwAUvutuK8GIQn.gif"
)
KamelImage({ asyncPainterResource(gifUrls[gifIndex]) },
    contentDescription = "Compose",
    modifier = Modifier.fillMaxSize(),
    onLoading = {
        println(it)
        CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
    })

Everything seems as expected. If you can provide a way to duplicate it I can take a look

[buszi]

My repo is public, you can clone it and check it out. https://github.com/buszi0809/Catty

The usage of Kamel that I'm referring to is placed in HomeScreen.kt https://github.com/buszi0809/Catty/blob/main/composeApp/src/commonMain/kotlin/com/kwdev/catty/ui/home/HomeScreen.kt