Xcode – SwiftUI Firestore LazyVGrid Navigation Slows with more elements

I have a tab on my fitness app that shows all the fitness trainers on my app, pulled from firestore. I have noticed that when the grid is showing more than 4-5 trainers then when I tap on a trainer (navigation link to their profile) the transition is pretty laggy and slow, and the same thing happens when I press the back button on the trainer profile to return to the grid of all trainers.

Here is my code for the tab showing all trainers:

ScrollView (.vertical, showsIndicators: false, content: {
        
        VStack (alignment: .leading, spacing: 15){
            
            //PAGE TITLE
            HStack {
                Text("Explore creators")
                    .font(.system(size: 22, weight: .semibold))
                    .foregroundColor(.black)
                
                Spacer(minLength: 0)
                
            }
            .padding(.horizontal)

            
            LazyVGrid(columns: items, alignment: .leading, spacing: 12, content: {
                
                //FOR EACH LOOP TO SHOW ALL TRAINERS
                ForEach(topTrainers) { trainer in
                
                    NavigationLink(
                        destination: TrainerView(trainer: trainer, user: user),
                        label: {
                            ExploreGridCell(trainer: trainer)
                        })
                    
                //END OF FOR EACH LOOP
                }
            //END OF LAZYVGRID
            })
            .padding(.top, 6)
            .padding(.horizontal)
            
            
        }
        .padding(.bottom)
        .padding(.top)
        
    })
    .background(Color("fiticBg").ignoresSafeArea())
    .navigationBarTitle("")
    .navigationBarHidden(true)
    .onTapGesture {
        self.hideKeyboard()
    }

Here is my code for what a trainer cell in the lazyVGrid is:

ZStack {
        KFImage(URL(string: trainer.trainerImageUrl))
            .loadImmediately()
            .resizable()
            .scaledToFill()
            .frame(width: width, height: 175)
            .clipped()
        
        Rectangle()
            .foregroundColor(.clear)
            .background(LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .center, endPoint: .bottom))
        
        VStack (alignment: .leading, spacing: 5){
            
            //TRAINER CERTIFICATION BADGE
            if trainer.trainerCertified {
                HStack {
                    
                    ZStack {
                        Color(.white)
                            .frame(width: 15, height: 15)
                        
                        Image(systemName: "checkmark.seal.fill")
                            .font(.title2)
                            .foregroundColor(Color("fiticGreen"))
                    }
                    .clipShape(Circle())
                    
                    
                    Spacer(minLength: 0)
                }
            } else {
                //SHOW NOTHING HERE IF TRAINER IS NOT CERTIFIED
            }
            
            Spacer()
            
            //CONTENT TITLE WITH SPACER FOR SECOND LINE OVERLAP
            HStack {
                Text(trainer.trainerName)
                    .font(.system(size: 16, weight: .bold))
                    .foregroundColor(.white)
                
                Spacer(minLength: 0)
            }
            
        }
        .padding(.horizontal, 10)
        //PUSHES TRAINER NAME UP A BIT
        .padding(.bottom)
        //PUSHES CERTIFICATION BADGE DOWN A BIT
        .padding(.top, 5)
    }
    .cornerRadius(8)
    .shadow(color: Color.black.opacity(0.25), radius: 5, x: 0, y: 5)

From other stack overflow questions I have seen things about using a List instead of scrollview, but I have tried and it just does not work with how my view needs to be set up.

Is there anything in my code that would appear to be causing such poor performance and slow transitions for the navigation links?