how can I improve seat rendering in compose when the layout is separated by section, row, and column

I'd like to know the type for seatSections and uiState and how you're collecting the uiState. Also have you tried wrapping seatSections in items instead of item and using forEach. That's not a good practice in LazyRow.

Thank you for your respond NirajDota. here is my code to collecting the seatSections now.

private fun generateSeatsForTheater( theater: Theater, filledSeats: List<String> ): Map<String, Map<Int, List<Seat>>> { val seats = LinkedHashMap<String, Seat>(theater.columnCount * theater.rowCount) for (colIndex in 0 until theater.columnCount) { val rowLabel = ('A' + colIndex).toString() for (row in 1..theater.rowCount) { val seatId = "$rowLabel$row" val section = theater.sections.first { row - 1 in it.rowStart..it.rowEnd } seats[seatId] = Seat( id = seatId, row = rowLabel, column = row, sectionId = section.id, displayLabel = seatId, status = if (seatId in filledSeats) SeatStatus.UNAVAILABLE else SeatStatus.AVAILABLE ) } } val seatSections = seats.values .groupBy { it.sectionId } .mapValues { (_, seatsInSection) -> seatsInSection .groupBy { it.column } .mapValues { (_, seatsInColumn) -> seatsInColumn.sortedBy { it.row } } .toSortedMap() } return seatSections } 

I also use an items instead of item on my screen for now. I'll share my updated code below:

LazyRow( horizontalArrangement = Arrangement.spacedBy(16.dp), contentPadding = PaddingValues(horizontal = 24.dp) ) { items(uiState.seats.keys.toList(), key = { it }) { sectionId -> val columnMap = uiState.seats[sectionId]!! Row(horizontalArrangement = Arrangement.spacedBy(2.dp)) { columnMap.forEach { (_, seatsInColumn) -> Column(verticalArrangement = Arrangement.spacedBy(2.dp)) { seatsInColumn.forEach { seat -> SeatItem( seat = seat, status = seat.status, onSeatSelected = onSelectSeat ) } } } } } } 

After all this improvements, the laggy effect has been decreased but still have the laggy feel. How do u think about it?