How to make automated test scripts in protractor wait, until the page is loaded fully

Question

No, but really! I know this generic question has been asked thousands of times, but there is something more specific that looks feasible to me and thus I want to know how to achieve it

The problem

I'm testing an angular app with protractor. Inside the app I want to verify that when I click a link I'm being redirected to the right page (non-angular). The problem is that until I reach the page I'm verifying, the url changes 3 times or so (there are multiple redirections happening), so I can't make a waiting function wait until the page is loaded completely

What I tried/what won't work for me

1. I'm against browser.sleep() for more than 1000 ms!
2. browser.waitForAngular() as this is not an angular page
3. ExpectedConditions.urlIs() the url is the variable I'm asserting
4. ExpectedConditions.presenseOf() the page maybe changing so I can't rely on elements inside
5. browser.executeScript("return window.document.readyState") returns compete immediately, though the page is still loading (I was certain this is what I need, but that didn't work either)
6. I tried even adding a functions that waits for innerHtml of the whole page not change for at least 3 sec, but it fails because at times there is a pause of more than 3 sec between redirects are happening. Everything above 3 sec isn't a reasonable timeout

The question

What I noticed is when the browser is loading the page, Reload this page button changes its state to Stop loading this page (X icon) until I'm redirected to the final page (screenshots below). So the question is is there a way to make protractor point to the same condition that chrome uses to choose which icon is displayed?

vs

And if not exactly the same, but how do I make protractor hang until the page is fully loaded

Important to consider

Obviously there are a lot of dirty solutions that I can do like explicit waits. But I'm coming back to this question every once in a while, so I'm not interested in these dirty solutions that work 70% of the time for a specific cause

P.S. I figured that the button changes the icon on document.load() event. But I can't figure out what should I write in the console in order for that script to log a message when I refresh they page

Answer 1

Have you tried

await browser.wait(async () =>
        await browser.driver.executeScript('return document.readyState;') === 'loading', 2000)
        .then(() => true, () => true);
await browser.wait(async () =>
        await browser.driver.executeScript('return document.readyState;') === 'complete', 5000)