How do I wait for an element to disappear in Cypress?

Question

I'd like to preface this by saying that I really tried looking here and anywhere else for an answer but without a succes.

Here is the problem: I'm trying to automate a test for a web application that is loading a bigger amount of data and therefore has to be loading for a while. I have to wait for the page to load to do the next step and I'm trying to figure how to wait for the loading gif to be complete so that my tests can continue. The gif is a basic spinning thingy.

I would like to avoid using implicit wait time (cy.wait()) that is really only the last resort if noone is able to solve this.

What I found o far are these two functions:

1. cy.waitFor - this seems to be used mostly in situations, where you are waiting for an element to apper - I've tried this in different scenarios and works perfcetly but I havent been able to apply it here.

2. cy.waitUntil - this seems to be the thing I'm looking for but there is one huge problem. This function seems to have a timeout and I haven't been able to change it any other way than by changing timeouts globally for all the functions. If I set the global timeout to some longer period (minute +), then it works exactly how I would want it to work but obviously I dont really want to have such a long timeout for everything.

The way I see it, there are two possible solutions to this problem>

1. to change/turn off the timeout for the waitUntil function.

2)Or to somehow make it work with waitFor, because there seems to be no implicit timeout there and it just kind of waits forever for something to happen. here is the code snippet of the situation:

cy.get('#load-data-button').click() // this clicks the button that stars the loading proces     
cy.waitUntil(() => cy.get('body > div > my-app > billing > div > div > div.text-center > img').should('not.be.visible',) ) // this is the function that waits until the loading gif is invisible

I would be eternaly grateful for a solution, because unfortunatelly no one at my company is really a Cypress expert so they are not able to help.

Answer 1

Could you try something like:

cy.get([loading-spinner-identifier]).should("not.be.visible", { timeout: 60000 }); 
cy.get([an element that should now be visible]).should("be.visible");

It's a bit rough and ready, but I've used it when waiting for spinners to finish up. This waits a minute to see the spinner isn't there and then checks to see that something I'm expecting is there. I'd had varying success with this, but it has helped in some situations.