skip to Main Content

I am working on an app in SwiftUI, prior to iOS 14.2 UI updates were smooth as butter, But from iOS 14.2, UI updates with a large amount of data or complex data seem to be very laggy (for example using the LazyVGrid or LazyHGrid with a medium amount of data for more than 20 elements in the pageTabView makes the UI updates too slow.

Here is my code for GridView

 var body: some View {
    
    ScrollView {
        VStack {
            LazyVGrid(columns: columns, spacing: 10.0) {
                ForEach(self.favViewModel.favourites.indices, id: .self) { fav in
                    createGridCellView(fav: fav)
                        .onLongPressGesture {
                        self.selectedItem = fav
                        self.hasSelectedDropDown = true
                    }
                        .alert(isPresented: self.$showDeleteAlert, content: { () -> Alert in
                            Alert(title: Text("Are you sure you want to delete this?"), message: Text("There is no undo"), primaryButton: .destructive(Text("Delete")) {
                                self.favViewModel.send(action: .deleteFavourite(item: selectedItem))
                            }, secondaryButton: .cancel())
                        })
                }
            }
            
            Color.clear.padding(.bottom, 100)
        }
        
        
        .actionSheet(isPresented: self.$hasSelectedDropDown, content: { () -> ActionSheet in
            ActionSheet(title: Text("Delete Favourite"), buttons: [.destructive(Text("Delete"), action: {
                self.showDeleteAlert = true
            }),.cancel()])
        })
        
    }
    .padding(.top, 10.0)
    .padding(.bottom, 30.0)
    
}

Grid Cell View

struct FavouriteGridCell: View {
@Binding var name: String
@State var icon: String
var handler: () -> Void



func createTransparentCircle() -> some View {
    Circle()
        .frame(width: 80, height: 80)
        .shadow(radius: 1.0)
        .foregroundColor(Color.clear)
        .background(BlurView(style: .light).cornerRadius(50.0).brightness(-0.1))
}

func createRectangleView() -> some View {
    Rectangle()
        .fill(Color.white.opacity(0.3))
        .frame(height: 20.0)
        .cornerRadius(12.5)
}

var body: some View {
    VStack {
        ZStack {
            createTransparentCircle()
            Image(icon)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 50, height: 50)
            
        }.onTapGesture {
            handler()
        }
        
        Text(name)
            .font(Font.custom(Theme.Fonts.Asap_Semibold, size: 14.0))
            .foregroundColor(Color.white)
            .fontWeight(.bold)
            .frame(minWidth: 0,
                   maxWidth: .infinity,
                   minHeight: 0,
                   maxHeight: .infinity,
                   alignment: .center)
            .lineLimit(2)
        
        Color.clear.padding(.bottom, 10.0)
    }
}

}

Code for PageTabView

VStack {
                    
    TabView(selection: $currentPage){
    FavouriteGridView(favViewModel:       self.favouriteViewModel,soundsViewModel: self.soundsViewModel)
                                .tag(0)
                            
                        }.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                    }

Does anyone experience the same issues?

I am looking forward to your help. Thank You

2

Answers


  1. Chosen as BEST ANSWER

    The issue was with the TabView(PageTabViewStyle), I don't know why, but since iOS 14.2 adding data in the tabview makes the UI unresponsive and laggy, For now, I ended up removing the PageTabView provided by the apple and added a custom Page style TabView from here https://swiftwithmajid.com/2019/12/25/building-pager-view-in-swiftui/.


  2. my two cents for other people arriving here..

    I got an heavy performance problem.
    I DID use LazyVGrid from start, but I hade big performance issues the same.

    It was a stupid mistake (due to refactoring.. with few cells it does work fine..)

    I had:

    ...
      ScrollView {
                     Text("Products:")  
                     ProductsLazyGrid(products: filteredProducts(),
                        
                     }
                    }
    

    My mistake was:

    INSIDE ProductsLazyGrid I DID write another one:

       var body: some View {
            ScrollView {
                
                LazyVGrid(columns: calcColumns(), spacing: VSpacing)
    

    ….
    }

    So first thing (before ever firing up Instruments… as per Apple: https://developer.apple.com/documentation/swiftui/creating-performant-scrollable-stacks)

    triple check nested Scrollviews.

    Hope can help.

    Technically I think nesting scrollViews will force SwiftUI to make calculations ANYWAY, zeroing any advantage of laziness.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search