In `LazyColumn` , I'm using fading animation for item animation. When item is added, all the items o...

# compose

[aniruddha dhamal]

In LazyColumn , I'm using fading animation for item animation. When item is added, all the items on the screen animate. How to get only that item animated and rest of the items shift the positions? Details in the 🧵

[aniruddha dhamal]

LazyColumn {
    items(imageUrls) { imageUrl ->
        val result = loadNetworkImage(imageUrl).value
        Crossfade(targetState = result) { result ->
            when (result) {
                is Result.Loading, Result.Empty -> {
                    Icon(
                        painterResource(id = R.drawable.placeholder),
                        contentDescription = null,
                        modifier = Modifier.size(128.dp)
                    )
                }
                is Result.Success -> {
                    val data = result.data
                    Image(
                        painter = BitmapPainter(data.toBitmap().asImageBitmap()),
                        contentDescription = null,
                        modifier = Modifier.size(128.dp)
                    )
                }
            }
        }
    }
}

[aniruddha dhamal]

[Albert Chang]

Set a unique key for each item using items(imageUrls, key = { … }) { …}.

[aniruddha dhamal]

Thanks Albert!
Since, item is added at index 0, if i use key it doesn't show up in the list. I have to move to the top manually to see it.
Do i have to programmatically move it to top? Is there any other way to handle it?

[Albert Chang]

Yeah you have to programmatically move to top.