Forum | Appery.io

Hi

I have seen a few post about hiding the spinner but none seem to work for me.

I want to show the spinner at all times, except when I am doing a certain REST query. I just want it disabled/hidden for that one particular query.

Thank you

Hello Deon,

Appery.io doesn't have such default functionality, please hide it with a function prehideSpinner();/pre or add a CSS class with a property predisplay:none;< to the spinner (add it to the class .ui-icon-loading) before sending that request/pre/pre

Serhii,

hide and show spinner when called to prevent a service from showing a spinner - does not seem to work.

Coincidentally I'm having the same issue as Deon.

So - you recommend the css approach..??

Bruce

and - just to ask all the questions at once... I assume you mean an approach via CSS that's like the one described here....

https://getsatisfaction.com/apperyio/...

However, in order to do that - we will need to know - what element to add the class to? What is the spinner that is attached to the data service actually called??

Best,

bruce

Hey Guys,

I could be wrong but I think this is what Serhii is referring to

code<div class = "ui-loader ui-corner-all ui-body-a ui-loader-default" >
< span class = "ui-icon-loading" >< /span>
<h1>loading</h1>
<>/code

So maybe something like this?

.codeui-icon-loading {
display:none;
}/code

I wonder if the problem you are experiencing (not be able to hide the spinner during service execution is related to using the mapping editor to execute the service in contrast to manually doing it. I will test and let you know.

Hope this helps

try this

$("ui-icon-loading").css({"display": "none"});

another approach would be along the lines of this

function removeElementsByClass(className) {
var elements = document.getElementsByClassName(className);
while (elements.length 0) {
elements[0].parentNode.removeChild(elements[0]);
}
}

Hi Jeff,

Thanks for jumping in.... I've tried the $("ui-icon-loading").css({"display": "none"}) in various spots in the code - to no avail.

I've found that window.hideSpinner() will work - but only 1 time - after that - it's ignored.

I'm unsure how to approach the removeElementsByClass - ie - where to call it from - and with what parameters....

thanks for the ideas...

Let me know if you have more suggestions!
Bruce

Hi Bruce,

here are some early observations...

function removeElementsByClass2(className) {
var elements = document.getElementsByClassName(className);
while (elements.length 0) {
//elements[0].parentNode.removeChild(elements[0]);
console.log('ui-icon-loading ', elements.length);
}
}

document.getElementsByClassName will not work. Testing it now on page load crashes due to finding 100k+ 'ui-icon-loading' elements in the DOM [when logging length to console]. Removing the element after it is created will not work either because it is created just as fast as you remove it. This also sheds some light on why window.hideSpinner() only works the first time; the element is added and removed from the DOM in succession, the time of which is dependent on the time the service is executed.

I will look into the css tomorrow.

Made some progress but cant quite get it to work. Maybe someone can see what I am doing wrong?

codevar el = document&#46;getElementsByClassName('ui-icon-loading');
el[0]&#46;style&#46;display = "none&quot
el[0]&#46;setAttribute("style", "display:none; border: 1px solid blue;");
console&#46;log('el ', el);
var elDisplay = el[0]&#46;style&#46;display;
var elBorder = el[0]&#46;style&#46;border;
console&#46;log('elDisplay', elDisplay);
console&#46;log('elBorder', elBorder);

&#47;&#47;console&#46;log('docstyleSheets', document&#46;styleSheets[0]);/code