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

Nicholas Doglio

09/16/2021, 12:52 PM
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.
r

Ravi

09/16/2021, 1:04 PM
Copy code
@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
n

Nicholas Doglio

09/16/2021, 7:37 PM
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 🤔
Copy code
@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)
        }
    }
}
3 Views