What’s the best way to handling an infinite paging...

# compose

[Nicholas Doglio]

What’s the best way to handling an infinite paging list without using the jetpack paging library? (Trying to keep my paging solution JVM only for easier testing and hopefully KMP at some point) I’m currently using SnapshotStateList and it’s working fine but still new to Compose so was wondering if anyone had a better implementation.

[Ravi]

@Composable
fun Pagination(
    listState: LazyListState, buffer: Int = 5, action: () -> Unit
) {
    val loadMore = remember {
        derivedStateOf {
            val layoutInfo = listState.layoutInfo
            val totalItemsNumber = layoutInfo.totalItemsCount
            val lastVisibleItemIndex = (layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0) + 1
            lastVisibleItemIndex > (totalItemsNumber - buffer)             
        }
    }
    LaunchedEffect(loadMore) {
        snapshotFlow { loadMore.value }
            .distinctUntilChanged()
            .collect {
                if (it) {
                    action()
                }
            }
    }
}

implemented pagination with this logic, didn’t write any JVM test cases till now

[Nicholas Doglio]

Interesting, how are you using this Pagination function?

It looks like you call it within the items LazyColumn function? Nevermind I found LazyListState is a parameter for LazyColumn so this is all constructed above the LazyColumn? Nice I think I like that better than what I have, what is derivedStateOf needed for here?

This is my first attempt at paging and it seems to be working but maybe I should be using LaunchEffect here 🤔

@Composable
fun PagingColumn(
        data: SnapshotStateList<String>,
        fetchIndex: Int,
        fetchMoreContent: () -> Unit,
        content: @Composable (String) -> Unit
) {

    LazyColumn {
        itemsIndexed(data) { index, item ->
            if ((data.size - fetchIndex) == index) {
                fetchMoreContent()
            }

            content(item)
        }
    }
}