SwiftUI PageTabView in iOS 14.2 performance issues lagging

Question

I'm using TabView with PageTabViewStyle, and each child view comprises a list view with a large data set.

Only on iOS 14.2, the page transitions seem to be very laggy.

However, page transitions are not delayed in list views with a small amount of data.

It's my guess that the performance of TabView comprises list would be independent of the amount of data, because of the list row display is lazy.

So, I believe it is bugs or default view style changes.

I look forward to your help to solve this problem. Thank you

@available(iOS 14.0, *)
struct ContentView: View {
    @State var showHeart: Bool = false
    var body: some View {
        TabView{
            self.contents
            self.contents
        }
        .tabViewStyle(PageTabViewStyle())
    }
    var contents: some View{
        List(0..<1000){_ in
            Text("HELLO WORLD HELLOWORLD")
        }
    }
}

Answer 1

I have been playing with this and just a discovery - when you use TabView() it is laggy, but if you add a binding passed as TabView(selection: $selection) and just don't do anything with the selection binding it somehow doesn't lag anymore? Hacky, but a solution.

Answer 2

Try using lazy loading. Something like this: https://www.hackingwithswift.com/quick-start/swiftui/how-to-lazy-load-views-using-lazyvstack-and-lazyhstack

As you can see in the video: https://streamable.com/7sls0w the List is not properly optimized. Create your own list, using LazyVStack. Much better performance, much smoother transition to it.

I don't think you understood the idea. Code to solve the issue:

    @State var showHeart: Bool = false
    var body: some View {
        TabView {
            contents
            contentsSecond
        }
        .tabViewStyle(PageTabViewStyle())
    }
    
    var contents: some View {
        List(0..<10000) { _ in
            Text("HELLO WORLD HELLOWORLD")
        }
    }
    
    var contentsSecond: some View {
        return ScrollView {
            Divider()
            LazyVStack {
                ForEach(1...1000, id: \.self) { value in
                    Text("Luke, I am your father \(value)")
                        .padding(.all, 5)
                    Divider()
                }
            }
        }
    }