Could you please describe the reasoning behind this approach of

• injecting a header (tabs + filter bar) to each list view. When switching tabs, the header also has fade-in animation.
• switching lists by toggling the opacity.

How about keeping the header above switchable list views and using a TabView:

VStack {
    headerView
    TabView(selection: $viewModel.selectedTab) {
        ForEach(BookingListTab.allCases, id: \.rawValue) { tab in
            BookingListView(viewModel: viewModel.listViewModel(for: tab)) {
            }
            .tag(tab)
        }
    }
    .tabViewStyle(.page(indexDisplayMode: .never))
}

We have other places in the app where the TabView is used.

injecting a header (tabs + filter bar) to each list view. When switching tabs, the header also has fade-in animation.

Hey - this was a workaround for the refresh control in the booking list. When the list is added to a navigation view with large title, pulling down the list will also pull down the big title while the header (tab bar and filter bar) stays fixed at the top, which looks bad. Injecting the header to a section inside the scroll view and ask the LazyVStack to pin the section header helped pulling the header down as well.

switching lists by toggling the opacity.

I wanted to keep the states of the lists instead of re-rendering and loading bookings again upon switching tabs.

How about keeping the header above switchable list views and using a TabView

Thanks for the great idea! I didn't think about using TabView just for the content, and TIL about hiding the index view. Using the TabView fixes both the problems above for me: managing the tab views and keeping the refresh control under the header view, instead of above the large navigation title:

I updated the BookingListView to remove the now redundant workarounds for the header and refresh control. I also added a check to avoid loading the booking list again if it's not empty.

Please take another look when you can 🙏