0

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)
    }
}

1 respuesta 1

0

El primer paso para hacerlo eficiente sería en el ScrollView sustituir el VStack por un LazyVStack (este te va a cargar solo los elementos que este en pantalla)

ScrollView(.vertical, showsIndicators: false) {
LazyVStack {
    let groups = searchViewModel.dividePostsIntoGroups()

    ForEach(groups.indices, id: \.self) { index in // etc...

Segundo paso:

En el SearchViewModel create dos variables:

private var currentPage = 0
private let pageSize = 18

Y la función que llamaras cada vez que se tenga que llamar a la siguiente pagina será func fetchRandomPosts() y create una función nueva self.nextPage(), donde irás aumentando la página en 1 y añadidiendo posts, quedaría algo así

func fetchNextPage() {
   // Aquí asegurate de que puedes seguir añadiendo elementos y añadiendo paginas
   posts.append(contentsOf: allPosts)
   currentPage += 1
}

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
            self.nextPage()
        }
}

En la vista en el forEach cada vez que llegue al último elemento llamaras a fetchRandomPosts() y seguiras paginando y añadiendo elementos al scroll:

ScrollView(.vertical, showsIndicators: false) {
LazyVStack {
    let groups = searchViewModel.dividePostsIntoGroups()

    ForEach(groups.indices, id: \.self) { index in
       // etc...
    }.onAppear {
      // Comprobar el último elemento
      if index == lastElement {
       searchViewModel.fetchNextPage()
     }
    }

Con esto lo tendrías mejor controlado y optimizado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.