Search code examples
androidkotlinandroid-jetpack-compose

LazyColumn lags Jetpack Compose


I have made simple 30 days app using lazyColumn, but when I lauched it on my phone, it's has MASSIVE lags.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            _30DaysTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    _30DaysApp()

                }
            }
        }
    }
}

@Composable
fun _30DaysApp() {
    Scaffold(topBar =  {
        TopBar()
    }) {
        LazyColumn(
            contentPadding = it,
            verticalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            itemsIndexed(items = tasks,
                key = { _, task ->
                    task.id
                }) { index, task ->
                CardTask(task = task, day = index + 1)
            }
        }
    }
}

@Composable
fun CardTask(task: Task, day: Int, modifier: Modifier = Modifier) {
    var expand by remember { mutableStateOf(false )}
    Card(shape = RoundedCornerShape(16.dp),
        modifier = Modifier
            .padding(horizontal = 8.dp)
            .clickable { expand = !expand }) {
        Column(
            modifier = modifier
                .animateContentSize(
                    animationSpec = spring(
                        dampingRatio = Spring.DampingRatioNoBouncy,
                        stiffness = Spring.StiffnessMedium
                    )
                )
                .padding(12.dp)
        ) {
            Row {
                Text(
                    text = stringResource(R.string.day, day),
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Bold
                )
                Spacer(modifier = modifier.weight(1f))
                ExpandButton(
                    expanded = expand,
                    modifier = Modifier.size(24.dp)
                )
            }
            Text(
                text = stringResource(task.articleRes),
                fontSize = 24.sp
            )
            Spacer(modifier = Modifier.size(8.dp))
            Image(
                painter = painterResource(task.imageRes), contentDescription = null,
                contentScale = ContentScale.FillWidth,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(160.dp)
                    .clip(RoundedCornerShape(12.dp)),
            )
            if (expand) {
                Text(
                    text = stringResource(task.descriptionRes),
                    fontFamily = Poppins,
                    modifier = Modifier.padding(top = 12.dp)
                )
            }

        }
    }
}

@Composable
fun ExpandButton(expanded: Boolean, modifier: Modifier = Modifier) {
        Icon(modifier = modifier,
            imageVector = if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
            contentDescription = null,
            tint = MaterialTheme.colorScheme.secondary
        )
}

@Stable
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBar(modifier: Modifier = Modifier){
    CenterAlignedTopAppBar(title = {
        Text(text = stringResource(R.string.topBarDescription),
            style = MaterialTheme.typography.headlineMedium,
            fontSize = 26.sp)
    })

}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    _30DaysTheme {
        _30DaysApp()

    }
}

And here is class that I'm using

@Immutable
data class Task(
    @StringRes val articleRes: Int,
    @StringRes val descriptionRes: Int,
    @DrawableRes val imageRes: Int,
    val id: String = UUID.randomUUID().toString()
)

I have tried to add keys, image compression, adding @Immutable and @Stable annotaiton where I could, release build and R8 compilier but it's still lags a lot. Any help is appreciated.


Solution

  • Problem was with loading images in a list. In my case, I have installed Coil library and change line

    Image(
                painter = rememberAsyncImagePainter(task.imageRes)