Deon
Posts: 0
Joined: Sun Jun 30, 2013 6:00 am

Hide Spinner

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

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Hide Spinner

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

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

Hide Spinner

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

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

Hide Spinner

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

Jeffry Reed
Posts: 0
Joined: Sun Aug 14, 2016 3:59 pm

Hide Spinner

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

Jeffry Reed
Posts: 0
Joined: Sun Aug 14, 2016 3:59 pm

Hide Spinner

try this

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

Jeffry Reed
Posts: 0
Joined: Sun Aug 14, 2016 3:59 pm

Hide Spinner

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]);
}
}

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

Hide Spinner

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

Jeffry Reed
Posts: 0
Joined: Sun Aug 14, 2016 3:59 pm

Hide Spinner

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.

Jeffry Reed
Posts: 0
Joined: Sun Aug 14, 2016 3:59 pm

Hide Spinner

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

Return to “Issues”