How to wait the loading spinner disappears in Cypress

Question

When I run Cypress, the page of my application shows the loading spinner spinning indefinitely. While it is spinning the other components of the page are not displayed, so I need this spinner to disappear.

What I did

it('should wait spinner dissapears', function () {
        cy.waitUntil(function () {
            return cy.get('im-loader.hydrated')
.shadow()
.find('im-spinner.hydrated')
.should('not.be.visible');
      })
})

but Cypress times out retrying im-spinner.hydrated not to be visible

when I replace .should(not.be.visible) to should('not.exist') Cypress also times out: Expected <im-spinner.hydrated> not to exist in the DOM, but it was continuously found. This is the HTML code

Is there any way to wait for the spinner to disappear and load correctly the page? This is the Test runner log

Answer 1

it('should wait spinner dissapears', function () {
      cy.get('im-loader.hydrated',{"timeout":12000})
.find('im-spinner.hydrated')
.should('not.be.visible');
     
})

could you try this instead ? cy.get() has a default timeout of 4 sec it also can be modified by passing the options

https://docs.cypress.io/api/commands/get.html#Arguments

Or

cy.get(path).invoke('attr', 'value').then($initialVal => {
    //It's better if you can do your click operation here

    //Wait untill the element changes
    cy.get(path).then($newVal => {
        cy.waitUntil(() => $newVal[0].value !== $initialVal, {
            //optional timeouts and error messages
            errorMsg: "was expeting some other Value but got : " + $initialVal,
            timeout: 10000, 
            interval: 500 
          }).then(() => {
            cy.log("Foudn a difference in values")
        })
    })
})

see this discussion : https://stackoverflow.com/questions/62897411/cypress-wait-until-wait-for-element-attribute-to-change