How to save paging state of LazyColumn during navigation in Jetpack Compose

I found a solution!

@Composable
fun Sample(data: Flow<PagingData<Something>>):
    val listState: LazyListState = rememberLazyListState()
    val items: LazyPagingItems<Something> = data.collectAsLazyPagingItems()

    when {
        items.itemCount == 0 -> LoadingScreen()
        else -> {
            LazyColumn(state = listState, ...) {
                ...
            }
        }
    }
    ...

I just found out what the issue is when using Paging.

The reason the list scroll position is not remembered with Paging when navigating boils down to what happens below the hood. It looks like this:

1. Composable with LazyColumn is created.
2. We asynchronously request our list data from the pager. Current pager list item count = 0.
3. The UI draws a lazyColumn with 0 items.
4. The pager responds with data, e.g. 10 items, and the UI is recomposed to show them.
5. User scrolls e.g. all the way down and clicks the bottom item, which navigates them elsewhere.
6. User navigates back using e.g. the back button.
7. Uh oh. Due to navigation, our composable with LazyColumn is recomposed. We start again with asynchronously requesting pager data. Note: pager item count = 0 again!
8. rememberLazyListState is evaluated, and it tells the UI that the user scrolled down all the way, so it now should go back to the same offset, e.g. to the fifth item.

This is the point where the UI screams in wild confusion, as the pager has 0 items, so the lazyColumn has 0 items. The UI cannot handle the scroll offset to the fifth item. The scroll position is set to just show from item 0, as there are only 0 items.

What happens next:

9. The pager responds that there are e.g. 10 items again, causing another recomposition.
10. After recomposition, we see our list again, with scroll position starting on item 0.

To confirm this is the case with your code, add a simple log statement just above the LazyColumn call:

Log.w("TEST", "List state recompose. " +
            "first_visible=${listState.firstVisibleItemIndex}, " +
            "offset=${listState.firstVisibleItemScrollOffset}, " +
            "amount items=${items.itemCount}")

You should see, upon navigating back, a log line stating the exact same first_visible and offset, but with amount items=0. The line directly after that will show that first_visible and offset are reset to 0.

My solution works, because it skips using the listState until the pager has loaded the data. Once loaded, the correct values still reside in the listState, and the scroll position is correctly restored.

Source: https://issuetracker.google.com/issues/177245496

Save the list state in your viewmodel and reload it when you navigate back to the screen containing the list. You can use LazyListState in your viewmodel to save the state and pass that into your composable as a parameter. Something like this:

class MyViewModel: ViewModel() {
   var listState = LazyListState()
}

@Composable
fun MessageListHandler() {

   MessageList(
      messages: viewmodel.messages,
      listState = viewmode.listState
   )
}

@Composable
fun MessageList(
   messages: List<Message>,
   listState: LazyListState) {

    LazyColumn(state = listState) {

    }
}

If you don't like the limitations that Navigation Compose puts on you, you can try using Jetmagic. It allows you to pass any object between screens and even manages your viewmodels in a way that makes them easier to access from any composable:

https://github.com/JohannBlake/Jetmagic

The issue is that when you navigate forward and back your composable will recompose and collectAsLazyPagingItems() will be called again, triggering a new network request.

If you want to avoid this issue, you should call pager.flow.cacheIn(viewModelScope) on your ViewModel with activity scope (the ViewModel instance is kept across fragments) before calling collectAsLazyPagingItems().

LazyPagingItems is not intended as a persistent data store; it is just a simple wrapper for the UI layer. Pager data should be cached in the ViewModel. please try using '.cachedIn(viewModelScope) '

simple example:

@Composable
fun Simple() {
    val simpleViewModel:SimpleViewModel = viewModel()
    val list = simpleViewModel.simpleList.collectAsLazyPagingItems()
    when (list.loadState.refresh) {
        is LoadState.Error -> {
            //..
        }
        is LoadState.Loading -> {
            BoxProgress()
        }
        is LoadState.NotLoading -> {
                when (list.itemCount) {
                    0 -> {
                        //..
                    }
                    else -> {
                        LazyColumn(){
                            items(list) { b ->
                               //..
                            }
                        }
                    }
                }
        }
    }
    //..
}

class SimpleViewModel : ViewModel() {
    val simpleList = Pager(
        PagingConfig(PAGE_SIZE),
        pagingSourceFactory = { SimpleSource() }).flow.cachedIn(viewModelScope)
}