Paging 3 Compose :insertSeparators not working as expected

Question

I'm trying to insert separators to my list using the paging 3 compose library however, insertSeparators doesn't seem to indicate when we are at the beginning or end. My expectations are that before will be null at the beginning while after will be null at the end of the list. But it's never null thus hard to know when we are at the beginning or end. Here is the code:

    private val filterPreferences =
        MutableStateFlow(HomePreferences.FilterPreferences())
    
    val games: Flow<PagingData<GameModel>> = filterPreferences.flatMapLatest {
        useCase.execute(it)
    }.map { pagingData ->
        pagingData.map { GameModel.GameItem(it) }
    }.map {
        it.insertSeparators {before,after->
            if (after == null) {
                return@insertSeparators null
            }
            if (before == null) {
                Log.i(TAG, "before is null: ") // never reach here
                return@insertSeparators GameModel.SeparatorItem("title")
            }
            if(condition) {
                 GameModel.SeparatorItem("title")
          }
                else null     
        }
    }
        .cachedIn(viewModelScope)

GamesUseCase

class GamesUseCase @Inject constructor(
    private val executionThread: PostExecutionThread,
    private val repo: GamesRepo,
) : FlowUseCase<HomePreferences, PagingData<Game>>() {

    override val dispatcher: CoroutineDispatcher
        get() = executionThread.io

    override fun execute(params: HomePreferences?): Flow<PagingData<Game>> {
        val preferences = params as HomePreferences.FilterPreferences
        preferences.apply {
            return repo.fetchGames(query,
                parentPlatforms,
                platforms,
                stores,
                developers,
                genres,
                tags)
        }
    }
}

FlowUseCase

abstract class FlowUseCase<in Params, out T>() {

    abstract val dispatcher: CoroutineDispatcher

    abstract fun execute(params: Params? = null): Flow<T>

    operator fun invoke(params: Params? = null) = execute(params).flowOn(dispatcher)
}

Here is the dependency :

  object Pagination {
        object Version {
            const val pagingCompose = "1.0.0-alpha14"
        }
        const val pagingCompose = "androidx.paging:paging-compose:${Version.pagingCompose}"
    }

Answer 1

I'm assuming that filterPreferences gives you Flow of some preference and useCase.execute returns Flow<PagingData<Model>>, correct?

I believe that the problem is in usage of flatMapLatest - it mixes page events of multiple useCase.execute calls together.

You should do something like this:

val games: Flow<Flow<PagingData<GameModel>>> = filterPreferences.mapLatest {
  useCase.execute(it)
}.mapLatest {
  it.map { pagingData -> pagingData.map { GameModel.GameItem(it) } }
}.mapLatest {
  it.map { pagingData ->
    pagingData.insertSeparators { before, after -> ... }
  } // .cachedIn(viewModelScope)
}

This same structure works for us very well. I'm only not sure how cachedIn will work here, we are using a different caching mechanism, but you can try.