Jetpack Compose LazyVerticalGrid stuttering

Viewed 1221

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

2 Answers

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.

Related