A modern programming language that makes developers happier.

kotlinlang

Hello, I'm having a simple LazyVerticalGrid composable managing 10k items. Each item is just a coil image and text. When running this as a debug app, there is a lot of frame drops for a quick scroll (`Choreographer: Skipped 69 frames! The application may be doing too much work on its main thread.`). I get the initial frame drops when the code is just being JITed, however, it doesn't seem to recover at all (testing in Android 12L).  Can anyone give some pointers as to what is happening in the debug version?

```@Composable
fun LazyGridContainer(modifier: Modifier = Modifier) {
    val images = remember { mutableStateListOf<Image>() }

    LaunchedEffect(Unit) {
        val newImages = (1..10000).map { Image("Title $it", "<https://picsum.photos/200/300>") }
        images.addAll(newImages)
    }

    LazyGridComposable(images, modifier)
}

@Composable
private fun LazyGridComposable(images: List<Image>, modifier: Modifier = Modifier) {

    LazyVerticalGrid(
        columns = GridCells.Adaptive(110.dp),
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(images.size) { index ->
            GridItem(images[index])
        }
    }
}

@Composable
private fun GridItem(image: Image, modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
            .size(100.dp)
            .background(Color.Gray),
        contentAlignment = Alignment.BottomCenter
    ) {
        AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data(image.url)
                .memoryCachePolicy(CachePolicy.DISABLED)
                .diskCachePolicy(CachePolicy.DISABLED)
                .build(),
            contentDescription = null,
            modifier = Modifier.fillMaxSize()
        )

        Text(text = image.title, color = Color.Red)
    }
}```

Screen Recording 2025-04-13 at 1.15.22 PM.mov

Are you testing release or debug mode?
There’s a massive difference.

Also, it’s worth checking if the images you’re displaying have a high resolution. Drawing large bitmaps is a slow task. ~Coil’s `AsyncImage` doesn’t resize bitmaps by default, so you need to specify it manually. However, `SubComposeAsyncImage` does resize them automatically, if I’m not mistaken.~
`rememberAsyncImagePainter` definitely does not resize images before displaying them.

It is debug. Trying to understand why speed of scroll matters over here.

And from coil's doc <https://coil-kt.github.io/coil/compose/>

```Prefer using AsyncImage in most cases. It correctly determines the size your image should be loaded at based on the constraints of the composable and the provided ContentScale.```

&gt; It is debug. Trying to understand why speed of scroll matters over here.
First time with Compose? :sweat_smile:

*TLDR:* Debug builds are slow because they add debugging overhead and disable most compiler and runtime (JIT/AOT) optimizations. Release builds with R8 are fast because they include full build-time (compiler, R8) and runtime (JIT/AOT) optimizations. Measure performance on release builds only for accurate results.