Jetpack Compose LazyVerticalGrid 口吃

Question

I'm migrating my app and for the grid view I used LazyVerticalGrid that loads images using coilPainter but the scrolling stutters a lot and it feels laggy. Does anyone have a solution or a better implementation for this?

    val photos: List<Photo>? by photosViewModel.photosLiveData.observeAsState(null)

    Surface(modifier = Modifier.fillMaxSize()) {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            LazyVerticalGrid(
                cells = GridCells.Fixed(3)
            ) {
                photos?.let { photosList ->
                    items(photosList) { photo ->
                        Image(
                            modifier = Modifier.padding(2.dp).clickable {
                                photosViewModel.onPhotoClicked(photo)
                            },
                            painter = rememberCoilPainter(photo.url),
                            contentDescription = stringResource(R.string.cd_details_photo),
                            contentScale = ContentScale.Fit,
                            alignment = Alignment.Center,
                        )

                    }
                }
            }
        }
    }

Update

Trying to move rememberCoilPainter above Image like val painter = rememberCoilPainter(photo.url) and use the painter inside the Image did not work

Answer 1

items takes an additional parameter key , assign this parameter to a unique value like the index of each photo of your list, If you don't know how does that relate to scrolling jank? Or what the heck am I talking about? check out the following documentation for a detailed explanation:

https://developer.android.com/jetpack/compose/lifecycle#add-info-smart-recomposition

Answer 2

After updating my compose image loading library to coil-compose I was forced to set a size to either the request builder or the image itself. The problem of the stuttering was caused by allowing the photo to load the original size and thus recomposing was done multiple times and loading the image had to wait for the picture to load. By setting e fixed height to the Image fixed the issue because the Images() were created and the recomposition was made only for the picture inside not for the Image itself with different height.