PullRefreshIndicator overlaps with ScrollableTabRow

I'm starting to learn about Jetpack Compose. I put together this app where I explore different day-to-day use cases, each of the feature modules within this project is supposed to tackle different scenarios.

One of this feature modules – the chatexample feature module, tries to implement a simple ViewPager where each of the pages is a Fragment, the first page "Messages" is supposed to display a paginated RecyclerView wrapped around a SwipeRefreshLayout. Now, the goal is to implement all this using Jetpack Compose. This is the issue I'm having right now:

The PullRefreshIndicator that I'm using to implement the Pull-To-Refresh action works as expected and everything seems pretty straightforward so far, but I cannot figure out why the ProgresBar stays there on top.

So far I've tried; Carrying on the Modifier from the parent Scaffold all the way through. Making sure I explicitly set the sizes to fit the max height and width. Add an empty Box in the when statement - but nothing has worked so far, I'm guessing I could just remove the PullRefreshIndicator if I see that the ViewModel isn't supposed to be refreshing, but I don't think that's the right thing to do.

To quickly explain the Composables that I'm using here I have:

<Surface>
   <Scaffold> // Set with a topBar
       <Column>
           <ScrollableTabRow>
              <Tab/> // Set for the first "Messages" tab
              <Tab/> // Set for the second "Dashboard" tab
           </ScrollableTabRow>
           <HorizontalPager>
                // ChatExampleScreen
                <Box> // A Box set with the pullRefresh modifier
                   // Depending on the ChatExamleViewModel we might pull different composables here
                   </PullRefreshIndicator>
                </Box>
                // Another ChatExampleScreen for the second tab
           </HorizontalPager>
       </Column>
   <Scaffold> 
</Surface>

Honestly, I don't get how the PullRefreshIndicator that is in a completely different Composable (ChatExampleScreen) gets to overlap with the ScrollableTabRow that is outside.

Hope this makes digesting the UI a bit easier. Any tip, advice, or recommendation is appreciated. Thanks! 🙇

Edit: Just to be completely clear, what I'm trying to achieve here is to have a PullRefreshIndicator on each page. Something like this:

On each page, you pull down, see the ProgressBar appear, and when it is done, it goes away, within the same page. Not overlapping with the tabs above.

There is yet another solution to this problem, which is using a .clipToBounds() modifier over the tab content container.