Page loading takes long and how to deal the cypress test

Question

I have many pages in my web app where its taking time to load the pages. In the below example, I would like to avoid or reduce the using of cy.wait() as it is not ideal. How can we apply cy.route() in this example, can we create a common function and use that we ever possible ? note: Dev team are converting some old pages to React and dealing loading issues.

//test.spec.js

 cy.wait(5000);
 cy.bookspanel.getBookNavigationTab();

//bookhelpfunctions.js

cy.bookspanel = {
    getBookNavigationTab: function () {
        return cy.get('a > span').contains("Books").click();
    }
}

//index.js

import './bookhelpfunctions'

<a class="sc-iybRtq eCauUN" href="/spa/books?candidateStatusId=44501c83-5652-4462-9512-2e482514e28f"><span class="sc-iQtOjA hRzpyH"></span><span class="sc-cEvuZC gFbQRN">Books</span></a> 

Answer 1

You should add a cy.get() for something that only appears after the page load is finished,

cy.bookspanel = {
  getBookNavigationTab: function () {
    cy.get('a > span').contains("Books").click();
    cy.contains('h2', 'Heading that displays after page is loaded');  
    // Will not run next command until above heading appears.
  }
}

or pass to the function as a parameter if it changes on each page

cy.bookspanel = {
  getBookNavigationTab: function (myContent) {
    cy.get('a > span').contains("Books").click();
    cy.contains(myContent);  
    // Will not run next command until above content appears.
  }
}

cy.bookspanel.getBookNavigationTab('Heading that displays after page is loaded');