What s the best way to handling an infinite paging list with kotlinlang #compose

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

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

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