android-jetpack-composepull-to-refreshandroid-paging-3

Paging3 + PullToRefreshBox: Show Refresh Indicator Only for Manual Pull-to-Refresh, Not Programmatic Refresh


I am using Paging3 along with PullToRefreshBox to display a list page. The PullToRefreshBox component accepts an isRefreshing parameter to determine when to show the refresh indicator. Additionally, the indicator is also displayed when the user pulls down.

Now, I only want the refresh indicator to be shown when the user pulls down, but not when the list is refreshed programmatically. How can I achieve this?


Solution

  • Heres my implementation:

    @Composable
    fun HomeScreen(
        navController: NavController,
        viewmodel: HomeScreenViewModel = hiltViewModel()
    ) {
        val pagingItems = viewmodel.latestUpdatesPagingFlow.collectAsLazyPagingItems()
        var isRefreshing by remember { mutableStateOf(false) }
        val pullToRefreshState = rememberPullToRefreshState()
    
        val coroutineScope = rememberCoroutineScope()
    
        val onRefresh: () -> Unit = {
            isRefreshing = true
            pagingItems.refresh()
        }
    
        /*LaunchedEffect(pagingItems.loadState.refresh) {
            if (pagingItems.loadState.refresh !is LoadState.Loading) {
                isRefreshing = false
            }
        }*/
    
    //or this even better
    
          val isLoading = pagingItems.loadState.refresh is LoadState.Loading
            LaunchedEffect(isLoading) {
               isRefreshing = isLoading
              }
       
    
        Scaffold(
            contentColor = MaterialTheme.colorScheme.background,
            modifier = Modifier
                .fillMaxSize(),
            bottomBar = {
                MangaNavigationBar(
                    navController = navController
                )
            },
        ) {
            innerPadding ->
            PullToRefreshBox(
                isRefreshing = isRefreshing,
                onRefresh = onRefresh,
                state = pullToRefreshState,
                modifier = Modifier
                    .padding(innerPadding),
            ) {
                HomeScreenContent(
                    mangaLatestUpdatesList = pagingItems,
                    navController = navController,
                    onRetry = {  }
                )
            }
        }
    }
    

    I hope it helps!

    Note: This was made with help of AI for boilerplate code.