JetPack Compose is laggy

Question

I am trying to make the UI with the jetpack compose but my component starts to lag after 5-10 second and the lag just increase continuously i am stuck. I was making a Expandable card view but i just stuck in between and then start again very bad experience

@ExperimentalMaterialApi
fun ExpandableCard(){
    var expandedState by remember{mutableStateOf(false)}
    val rotationState by animateFloatAsState(
        targetValue = if (expandedState) 180f else 0f)
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .animateContentSize(
                animationSpec = tween(
                    durationMillis = 300,
                    easing = LinearOutSlowInEasing
                )
            )
        ,shape = RoundedCornerShape(4.dp)
        ,onClick = {expandedState = !expandedState}
    )
    {
        Column(
            Modifier
                .fillMaxWidth()
                .padding(12.dp)) {
            Row (verticalAlignment = Alignment.CenterVertically){
                Text(text = "Title Text",
                    modifier = Modifier.weight(6f),
                    fontSize = 22.sp,
                    fontWeight = FontWeight.Bold,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis)
                IconButton(
                    modifier = Modifier
                        .alpha(ContentAlpha.medium)
                        .weight(1f)
                        .rotate(rotationState)
                    ,
                    onClick = { expandedState = !expandedState }) {
                    Icon(imageVector = Icons.Default.ArrowDropDown,
                        contentDescription = "Drop-down arrow")


                }
            }
            if (expandedState){
                Text(text = "Lorem ipsum dolor sit amet, consectetur " +
                        "adipiscing elit. Integer nec odio. Praesent libero. " +
                        "Sed cursus ante dapibus diam. Sed nisi. " +
                        "Nulla quis sem at nibh" +
                        " elementum imperdiet. Duis sagittis ipsum. Praesent mauris." +
                        " Fusce nec tellus sed augue semper porta. Mauris massa." +
                        " Vestibulum lacinia arcu eget nulla. Class aptent taciti" +
                        " sociosqu ad litora torquent per conubia nostra, per inceptos"
                        + " himenaeos"
                ,fontSize =  18.sp,
                fontWeight = FontWeight.Normal,
                maxLines = 4,
                overflow = TextOverflow.Ellipsis)
            }
        }
    }
}```

Answer 1

you are testing it inside debug virsion. make an apk and then compose will show you the true power of itself!