https://kotlinlang.org logo
#compose
Title
# compose
d

Daniel Okanin

04/28/2022, 4:14 PM
Hello everyone! I have an issue with my LazyColumn. Im trying to display a list of notifications items but the list is so slow and laggy. I wrap my modal with stable annotation (see the NotificationViewModelItem below), but still have a state field inside. I figure out that when I set my Lazy Column under a Scaffold the list isn’t laggy anymore. Is it related? maybe is related to the SubcomposeLayout inner view that exists there? Thanks
plus1 1
Copy code
@Stable
data class NotificationViewModelItem(
    val title: String ?,
    val body: String ?,
    val imageDescriptor: ImageDescriptor?,
    var isViewed : MutableState<Boolean>,
    val type: Int = 0,
    val timeStamp : Long
)
Copy code
val scrollState: LazyListState = rememberLazyListState()
LazyColumn(
    state = scrollState,
    modifier = Modifier
        .fillMaxSize()
        .padding(
            start = 16.dp, end = 16.dp
        )

) {
    itemsIndexed(entries){index: Int, item->
        NotificationCard(item, index, onItemClicked)

    }
}
Copy code
@Composable
fun NotificationCard(
    item: NotificationViewModelItem,
    index: Int,
    onItemClicked: OnItemClicked<NotificationViewModelItem>? = null
) {

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .clickable(
                onClick = {
                    onItemClicked?.onItemClicked(item, index)
                },
                indication = rememberRipple(),
                interactionSource = remember { MutableInteractionSource() }
            ),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        HzImage(
            imageDescriptor = null,
            placeHolder = defaultPlaceholder(),
            emptyHolder = painterResource(
                id = getEmptyDrawable(Notification().apply { Type = item.type })
            ),
            modifier = Modifier
                .size(60.dp)
                .clip(CircleShape),
            contentScale = if (item.imageDescriptor != null && item.imageDescriptor.hasWhiteBg()) ContentScale.Fit else ContentScale.Crop,
        )
        Spacer(Modifier.size(10.dp))
        Column(
            modifier = Modifier.weight(1f),
        ) {
            if (!item.title.isNullOrEmpty()) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = item.title ?: "",
                    color = Color.Black,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            }
            Text(
                modifier = Modifier.fillMaxWidth(),
                text = item.body ?: "",
                color = Color.Black,
                maxLines = 3,
                overflow = TextOverflow.Ellipsis
            )
            Text(
                modifier = Modifier.fillMaxWidth(),
                text = AndroidCore.services().stringFormatter().formatDateForNotifications(item.timeStamp),
                color = Color.Black,
                overflow = TextOverflow.Ellipsis
            )
        }

        ViewedIndicator(item.isViewed.value)
    }
}

@Composable
fun ViewedIndicator(isViewed: Boolean) {
    Box(
        modifier = Modifier
            .size(14.dp)
            .background(color = HouzzTheme.colors.accentDefault.copy(alpha = if (!isViewed) 1f else 0f), shape = CircleShape)
    )

}
f

FunkyMuse

04/28/2022, 5:22 PM
Test the performance in release variant not in debug About the other thing if it really does fix the problem file an issue
d

Daniel Okanin

04/28/2022, 6:07 PM
thanks @FunkyMuse! But do you know why the Scaffold fix this issue in debug?
g

galex

04/28/2022, 6:11 PM
@FunkyMuse How come we can't have good performance in debug? What causes Compose to recompose more than necessary in debug?
a

Andrey Kulikov

04/29/2022, 12:38 PM
If wrapping it into Scaffold really fixes the issue for you could you please file a bug with the code you use, thanks
m

Mor Amit

05/02/2022, 11:29 AM
@galex we didn’t see more recompositions in debug, and yet the performance was much better on release. @Andrey Kulikov @FunkyMuse do you know why might cause this issue? is there a way to improve the performance in debug?
❤️ 1
f

FunkyMuse

05/02/2022, 3:07 PM
Compose's performance in debug is a known issue, just test a release version
g

galex

05/03/2022, 7:05 PM
Maybe @Chris Sinco [G] or @Adam Powell might have an idea why this happens? 🤔
a

Adam Powell

05/04/2022, 8:25 PM
many. 🙂 Everything from additional codegen to support things like live literals added in debug mode to ART running heavily reduced optimizations for debuggable apps to r8 applying quite a bit of optimization as well
g

galex

05/05/2022, 9:51 AM
@Adam Powell oh I see, thanks for your input 🙂
m

Mor Amit

05/06/2022, 1:54 PM
Thanks @Adam Powell!
d

Daniel Okanin

05/06/2022, 3:19 PM
Thanks 🙏 @Adam Powell
2 Views