I have a very simple app: 4,000 images(400x400 in .jpg) that need to display 3 in a row. All images a stored in file storage and are equal 1/3 of device width so I don't need to resize/rescale it but display as is.
Here is a body code:
var body: some View {
ScrollView {
LazyVGrid(columns: Array(repeating: GridItem(.fixed(size), spacing: 1), count: 3),
alignment: .center,
spacing: 0) {
ForEach(controller.newAlbums, id: \.self) { album in
PhotoThumbnailView(filePath: album)
}
}
}
.task {
controller.loadUserAlbums()
}
}
let size = UIScreen.main.bounds.width/3
struct PhotoThumbnailView: View {
@State private var image: Image?
@State private var imageFileURL: String
init(filePath: String) {
self.imageFileURL = filePath
}
func readFromFile(){
if let uiImage = UIImage(contentsOfFile: imageFileURL) {
self.image = Image(uiImage: uiImage)
}
}
var body: some View {
ZStack {
if let img = image {
img
} else {
Rectangle()
.foregroundColor(.clear)
.frame(width: size, height: size)
ProgressView()
}
}
.task({
readFromFile()
})
.onDisappear {
image = nil
}
}
}
The problem is that when I scroll down (even vary slowly) it lagging and the scrolling animation is not smooth. How to resolve the issue above?