Jetpack compoes lazycolumn skipping frames (lagging)

Hi i’m trying to implement a lazycolumn of a list of posts, I tested it on the emulator api 21 and 29 and it looks kinda smooth on the api 29 it’s a little bit laggy, when I tested it on a physical device it was lagging, It looks like it’s skipping frames or something…

I tried to remove some views that uses imageVector to see if that was the problem and still the same problem.

This is my composable view:

@Composable
fun HomePostView(
    category: String,
    imagesUrl: List<String> = listOf(imageHolder),
    doctorProfileImage: String = imageUrl,
    title: String,
    subTitle: String
) {


    Card(
        shape = PostCardShape.large, modifier = Modifier
            .padding(horizontal = 3.dp)
            .fillMaxWidth()
    ) {

        Column {

            PostTopView(
                category = category,
                onOptionsClicked = { /*TODO option click*/ },
                onBookmarkClicked = {/*TODO bookmark click*/ })

            CoilImage(
                data = imagesUrl[0],
                fadeIn = true,
                contentDescription = "post_image",
                modifier = Modifier
                    .fillMaxWidth()
                    .requiredHeight(190.dp)
                    .padding(horizontal = contentPadding),
                contentScale = ContentScale.Crop
            )

            Spacer(modifier = Modifier.height(10.dp))

            PostDoctorContent(
                doctorProfileImage = doctorProfileImage,
                title = title,
                subTitle = subTitle
            )
            Spacer(modifier = Modifier.height(contentPadding))

            PostBottomView(likesCount = 293, commentsCount = 22)

            Spacer(modifier = Modifier.height(contentPadding))

        }


    }
    Spacer(modifier = Modifier.height(10.dp))


}


@Composable
private fun PostDoctorContent(doctorProfileImage: String, title: String, subTitle: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = contentPadding)
    ) {

        CoilImage(data = doctorProfileImage,
            contentScale = ContentScale.Crop,
            contentDescription = null,
            fadeIn = true,
            modifier = Modifier
                .size(30.dp)
                .clip(CircleShape)
                .clickable {
                    /*Todo on doctor profile clicked*/
                })


        Column {
            Text(
                text = title, fontSize = 14.sp, maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                modifier = Modifier.padding(horizontal = contentPadding)
            )

            Text(
                text = subTitle,
                fontSize = 11.sp,
                color = LightTextColor,
                maxLines = 2,
                overflow = TextOverflow.Ellipsis,
                modifier = Modifier.padding(horizontal = contentPadding)
            )
        }
    }


}

@Composable
private fun PostBottomView(likesCount: Long, commentsCount: Long) {
    Row(
        modifier = Modifier.padding(horizontal = contentPadding),
        verticalAlignment = Alignment.CenterVertically
    ) {

        Row(
            Modifier
                .clip(RoundedCornerShape(50))
                .clickable { /*Todo on like clicked*/ }
                .padding(5.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                imageVector = ImageVector.vectorResource(id = R.drawable.ic_heart),
                contentDescription = "Like"
            )
            Spacer(modifier = Modifier.width(5.dp))
            Text(text = likesCount.toString(), fontSize = 9.sp)
        }
        Spacer(Modifier.width(20.dp))

        Row(
            Modifier
                .clip(RoundedCornerShape(50))
                .clickable { /*Todo on comment clicked*/ }
                .padding(5.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                imageVector = ImageVector.vectorResource(id = R.drawable.ic_comment),
                contentDescription = "Comment"
            )
            Spacer(modifier = Modifier.width(5.dp))
            Text(text = commentsCount.toString(), fontSize = 9.sp)
        }


    }
}

@Composable
private fun PostTopView(
    category: String,
    onOptionsClicked: () -> Unit,
    onBookmarkClicked: () -> Unit
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {

        Row(verticalAlignment = Alignment.CenterVertically) {
            IconButton(onClick = onOptionsClicked) {
                Icon(
                    imageVector = ImageVector.vectorResource(id = R.drawable.ic_threedots),
                    contentDescription = "Options",
                    tint = Color.Unspecified
                )
            }

            Text(text = category, fontSize = 16.sp, color = LightTextColor)

        }

        IconButton(onClick = onBookmarkClicked) {
            Icon(
                imageVector = ImageVector.vectorResource(id = R.drawable.ic_bookmark),
                contentDescription = "Bookmark"
            )
        }

    }
}

and the lazyColumn:

LazyColumn(contentPadding = paddingValues , state = state ) {
  
        items(30) {  post ->
            HomePostView(
                category = "Public Health ",
                title = "Food Importance",
                subTitle = "you should eat every day it's healthy and important for you, and drink water every 2 hours and what you should do is you should run every day for an hour"
            )

        }
    }

Note: I’m still not using a viewmodel i’m just testing the view with fake data

[shakil807g]

@Aline123-dev RV performance is much better on the same device, so I guess it’s not an issue with the device.

[Aline123-dev]

Please check out you device’s RAM and ROM

On Wed, May 26, 2021, 1:43 PM Shakil Karim @.***> wrote:

I had same issue #544 https://github.com/android/compose-samples/issues/544

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/android/compose-samples/issues/506#issuecomment-848586015, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS7AXS3P3Q2S6YQRRC67JBTTPSYCZANCNFSM44FZXGRQ .