Sticky Headers with paging 3 jetpack compose

Question

I am trying to implement sticky headers as shown in the example here, with paging using Jetpack compose LazyColumn as shown bellow :

LazyColumn(
        modifier = modifier.fillMaxSize(),
        contentPadding = PaddingValues(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {

        // TODO (HADI) enhance later
        notifications.itemSnapshotList.items.groupBy { extractNotificationHeader(it) }
            .forEach { (header, messages) ->
                stickyHeader {
                    NotificationHeader(
                        modifier = Modifier.fillMaxWidth(),
                        value = header
                    )
                }

                items(
                    items = messages,
                    key = { message -> message.notificationId },
                ) {
                    NotificationMessage(
                        notification = it,
                        onNotificationClick = { onNotificationClick(it) }
                    )
                }
            }
}

but I get requests from back-end with only 2 pages as I am using code like :

// API service method 
@GET("notifications")
suspend fun getNotifications(
    @Query("page") page: Int,
    @Query("page_size") pageSize: Int = 30
): GenericResponse<NotificationsJson>


// data source impl
class NotificationDataSourceImpl @Inject constructor(private val notificationApiService: NotificationApiService) : NotificationDataSource {

override val invalidatingFactory = InvalidatingPagingSourceFactory {
    NotificationMediator(notificationApiService)
}
override fun loadNotifications(): Flow<PagingData<NotificationCenterMessage>> {
    return Pager(
        config = PagingConfig(
            pageSize = 30,
            enablePlaceholders = false,
        ),
        pagingSourceFactory = invalidatingFactory
    ).flow
}
 override fun invalidateNotifications() {
    invalidatingFactory.invalidate()
}
}

the problem is I have 7 more pages, but they are not loaded when I reach the bottom position of the lazy column items, I've tried to use only items without looping and sticky headers and it's working fine. I've looked up for many solutions like here, but nothing worked as required. Also I am trying to mark notification at specific position when the user click it to be read, but when I use invalidateNotifications() the page reload and I lose the position even when I use animateScrollToItem() with rememberLazyListState()

score 0 · Answer 1 · answered Jun 29 '22 at 09:35

Loads are triggered by the LazyPagingItems.get method and you are not calling it anywhere. Modify your extractNotificationHeader function to return indices of the header and messages instead of the models and then inside stickyHeader and items, use them like notifications.get(headerIndex).

Sticky Headers with paging 3 jetpack compose

1 Answers1