En mi proyecto de SwiftUI, tengo un archivo llamado SearchViewModel donde he definido una función llamada fetchRandomPosts(). Esta función se encarga de recuperar publicaciones de Firestore de manera aleatoria. Mi problema radica en la forma en que estas publicaciones se cargan en la interfaz de usuario. Actualmente, todas las publicaciones se muestran de una vez, lo cual no es óptimo para la aplicación. Mi objetivo es implementar una carga más eficiente, comenzando con la carga inicial de solo 18 publicaciones. Luego, a medida que el usuario se desplaza hacia abajo en la pantalla, se cargarían seis publicaciones adicionales y así sucesivamente.
Código de SearchViewModel:
@Published var posts: [PostModel] = []
// fetchRandomPosts() trae las publicaciones de manera aleatoria
func fetchRandomPosts() {
db.collectionGroup("user_posts")
.getDocuments { querySnapshot, error in
guard let documents = querySnapshot?.documents else {
print("Error fetching documents: \(error?.localizedDescription ?? "Unknown error")")
return
}
let posts = documents.compactMap { document -> PostModel? in
do {
let post = try document.data(as: PostModel.self)
return post
} catch {
print("Error decoding post: \(error.localizedDescription)")
return nil
}
}
let randomPosts = posts.shuffled()
self.posts = randomPosts
}
}
// dividePostsIntoGroups() establece el diseño de las filas de publicaciones en la vista SearchView
func dividePostsIntoGroups() -> [[PostModel]] {
var groups: [[PostModel]] = []
var remainingPosts = posts
while !remainingPosts.isEmpty {
if remainingPosts.count >= 3 {
groups.append(Array(remainingPosts.prefix(3)))
remainingPosts = Array(remainingPosts.dropFirst(3))
} else if remainingPosts.count == 2 {
groups.append(Array(remainingPosts.prefix(2)))
remainingPosts = []
} else if remainingPosts.count == 1 {
groups.append([remainingPosts.first!])
remainingPosts = []
}
}
return groups
}
Código de SearchView:
ScrollView(.vertical, showsIndicators: false) {
VStack {
let groups = searchViewModel.dividePostsIntoGroups()
ForEach(groups.indices, id: \.self) { index in
let caseIndex = index % 5
switch caseIndex {
case 0:
let post = groups[index].first
let remainingPosts = Array(groups[index].dropFirst())
HStack(spacing: 7) {
KFImage(URL(string: post?.postImage ?? ""))
.resizable()
.modifier(ImagePostLargeModifier(post: post!))
VStack(spacing: 7) {
ForEach(remainingPosts.prefix(2)) { post in
KFImage(URL(string: post.postImage))
.modifier(ImagePostMinModifier(post: post))
}
}
}
case 1, 2, 4:
let posts = groups[index]
HStack(spacing: 7) {
ForEach(posts) { post in
KFImage(URL(string: post.postImage))
.modifier(ImagePostMinModifier(post: post))
}
}
case 3:
let post = groups[index].last
let remainingPosts = Array(groups[index].dropLast())
HStack(spacing: 7) {
VStack(spacing: 7) {
ForEach(remainingPosts.prefix(2)) { post in
KFImage(URL(string: post.postImage))
.modifier(ImagePostMinModifier(post: post))
}
}
KFImage(URL(string: post?.postImage ?? ""))
.modifier(ImagePostLargeModifier(post: post!))
}
default:
EmptyView()
}
}
.animation(.spring(), value: searchViewModel.posts)
}
}