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
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/.
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:
My mistake was:
INSIDE ProductsLazyGrid I DID write another one:
….
}
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.