General solution for ajax request in Protractor - ajax

Question

I want to wait until ajax call complete. Below I wrote general method. But It seems that is not work.
When I ran call function every afterajax request , isLoaded always to be true.
In protractor, Is there any solution? Or where have I made mistake?
Thank you
module.waitUntilJqueryLoad = async function (timeout) {
var isDone = false;
timeout = timeout || 60;
await browser.sleep(1000);
//Wait for jQuery to load
var isLoaded = await browser.driver.executeScript("return jQuery.active == 0;");
if(isLoaded) {
console.log("JQuery is Ready!");
return await browser;
}
//This loop will rotate for 60 times to check If page Is ready after every 1 second.
//You can replace your value with 60 If you wants to Increase or decrease wait time.
for (var i = 0; i < timeout; i++) {
try {
await browser.sleep(1000);
} catch (err) {}
//To check page ready state.
var isLoaded = await browser.driver.executeScript("return jQuery.active == 0;");
console.log(isLoaded);
if(isLoaded) {
console.log("JQuery is Ready");
isDone = true;
} else {
console.log("JQuery is NOT Ready !!");
}
if(isDone)
break;
}
return browser;
};

Answer 1

I have a work around for that. If your loading popup added display style, it will work.
This is not a general solution but other posted solution has not worked even below code.
await browser.wait(until.invisibilityOf(element(by.id('loadingPanel'))), 60000);
Example Usage :
element(by.id('selectPerson')).waitForInvisibilityOf(10000); // wait 10 seconds
Here is my solution;
protractor.ElementFinder.prototype.waitForInvisibilityOf = async function (timeout) {
var _debug = true;
var isDone = false;
timeout = timeout || 60000;
var seconds = timeout / 1000;
if(await !this.isPresent())
return this;
//This loop will rotate for 60 times to check If page Is ready after every 1 second.
//You can replace your value with 60 If you wants to Increase or decrease wait time.
for (var i = 1; i <= seconds; i++) {
await browser.sleep(1000);
var style = await this.getAttribute('style');
var insibilityOf = await style.includes('display: none;');
var visibilityOf = await style.includes('display: block;');
if(insibilityOf) {
if(_debug)
console.log(i + " second: Element invisible!");
isDone = true;
}
else {
if(_debug)
console.log(i + " second: Element NOT invisible!");
}
if(seconds === i)
throw "Element invisibility timed out after "+ timeout +" milliseconds";
if(!insibilityOf && !visibilityOf && i > 10) // break for paging is loaded
break;
if(isDone) // If element is invisible
break;
}
return await this; };