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?

CodePudding user response：

Nothing in your code seems to cause that lag, except, perhaps, the time to retrieve the Image for the trainer. Anything pulled from the interweb is subject to source of truth delays. One trouble shoot for that would be to pull a dozen or so images locally sourced just to determine if that lag goes away when pulling them from a local source. If so, then you need to look to FireStore

CodePudding user response：

So from other suggestions it seemed part of the problem was loading the images from firestore since they were such large documents. So I compressed the images and it slightly helped.

However, the thing that helped the most was removing the shadow from trainer cell. That seemed to be causing the most lag.