In my compose Application I have a simple list with LazyColumn but I’m facing a lag when I scrolling specially at first
In my list I have a image loading and had some conditions but I remove those conditions and still has the lag
I got release version and added key to my list and my model has stable
@Composable
fun TestScreen(marketList: List<CombineMarketResponse>? = null) {
LazyColumn (Modifier.background(Color.White )){
if (marketList != null) {
items(marketList , key = {it.id}) {
MarketListItem(market = it ) {
}
}
}
}
and this is MarketListItem
@Composable
fun MarketListItem(market: CombineMarketResponse, onMarketClick: (CombineMarketResponse) -> Unit) {
val context = LocalContext.current
val painter =
rememberAsyncImagePainter(
model =
ImageRequest.Builder(context).data(imageUrl)
.decoderFactory(SvgDecoder.Factory())
.crossfade(true)
.decoderFactory(SvgDecoder.Factory())
.memoryCachePolicy(CachePolicy.ENABLED)
.placeholder(if (needPlaceHolder) AppCompatResources.getDrawable(context, R.drawable.ic_placeholder) else null)
.error(if (needPlaceHolder) AppCompatResources.getDrawable(context, R.drawable.ic_placeholder) else null).build(),
)
Column(modifier = Modifier.clickable(indication = null, interactionSource = remember {
MutableInteractionSource()
}, onClick = {
onMarketClick(market)
})) {
Row(
Modifier
.fillMaxWidth()
.padding(dimensionResource(id = R.dimen.size_12))
.height(dimensionResource(id = R.dimen.size_44)),
) {
Box(
modifier = Modifier
.weight(1f)
.fillMaxHeight(),
contentAlignment = Alignment.CenterStart
) {
Box(
Modifier
.background(
color = colorRedSell,
shape = RoundedCornerShape(6.dp)
)
.padding(
vertical = dimensionResource(id = R.dimen.size_3),
horizontal = dimensionResource(id = R.dimen.size_12)
)
.widthIn(min = dimensionResource(id = R.dimen.size_32)),
contentAlignment = Alignment.Center,
) {
BodyText(
text = "321",
fontFamily = RabexFont.SemiBoldFaNum,
fontSize = RabexFontSize.Body3,
color = Color.White,
style = TextStyle(textDirection = TextDirection.Ltr),
)
}
}
Column(
Modifier
.weight(1f)
.padding(top = dimensionResource(id = R.dimen.size_2))
.fillMaxHeight(),
) {
BodyText(
text ="12",
fontFamily = RabexFont.RegularFaNum,
fontSize = RabexFontSize.Body3,
modifier = Modifier.weight(1f),
)
Spacer(modifier = Modifier.height(dimensionResource(id = R.dimen.size_6)))
BodyText(
text ="12",
fontFamily = RabexFont.RegularFaNum,
fontSize = RabexFontSize.Body4,
modifier = Modifier.weight(1f),
)
}
Column(horizontalAlignment = Alignment.End, modifier = Modifier.weight(1f)) {
Row(verticalAlignment = Alignment.CenterVertically) {
BodyText(
text = "${market.base}/${market.quote}",
fontFamily = RabexFont.RegularFaNum,
fontSize = RabexFontSize.Body4,
)
Spacer(modifier = Modifier.width(dimensionResource(id = R.dimen.size_4)))
Image(
painter = painter,
contentDescription = "Coil Image",
modifier = modifier,
colorFilter =
if (imageColor != null) {
ColorFilter.tint(color = colorPrimary100)
} else {
null
},
)
}
Spacer(modifier = Modifier.height(dimensionResource(id = R.dimen.size_6)))
Row {
Box(
modifier =
Modifier
.background(
color = colorSecondary100,
shape = RoundedCornerShape(6.dp),
)
.padding(
horizontal =
dimensionResource(
id = R.dimen.size_6,
),
vertical = dimensionResource(id = R.dimen.size_2),
),
) {
BodyText(
text = stringResource(id = R.string.p2p_trade),
fontFamily = RabexFont.RegularFaNum,
fontSize = RabexFontSize.Body5,
color = colorNatural6,
)
}
Spacer(modifier = Modifier.width(dimensionResource(id = R.dimen.size_4)))
Box(
modifier =
Modifier
.background(
color = colorSecondary100,
shape = RoundedCornerShape(6.dp),
)
.padding(
horizontal =
dimensionResource(
id = R.dimen.size_6,
),
vertical = dimensionResource(id = R.dimen.size_2),
),
) {
BodyText(
text = stringResource(id = R.string.title_trade_exchange),
fontFamily = RabexFont.RegularFaNum,
fontSize = RabexFontSize.Body5,
color = colorNatural6,
)
}
}
}
}
Divider(thickness = 1.dp, color = colorSecondary100)
}
}