web app builder busy indicator client side function

[wadsonmakari]

Hi all,

I am have extended web app builder and built a custom widget. I have a client side function that takes between 10 and 20 seconds to run. The function is client side and does not make a call to the server. 

I would like to indicate to the user that the function is running when a user calls this function and also show when the function is finished. The function is called via a click event on a button.

I have used the "dijit/ProgressBar" but this seems to work with requests made to the server but not client side functions.

Typically I use it as follows

html.setStyle("domNode", 'display', 'block');
"domNode".set('label','processing please wait...');

After the function is finished

 html.setStyle("domNode", 'display', 'none');

Is it possible to such a work flow with client side functions?

[RobertScheitlin__GISP]

Wadson,

   If you look at otb widget in WAB the way they handle this is to use "jimu/dijit/LoadingShelter" in the Widget.html and just call that object data-dojo-attach-point in the widget.js code like:

this.shelter.show(); and this.shelter.hide();

[wadsonmakari]

Thank you Robert for the suggestion. However it is not behaving in the way that I expected. I have implemented as follows

this.shelter.show();

this.myFunction(); //this function takes between 10 - 20 seconds to run(doing client side analysis using esri geometry engine)

At the end of myFunction I have this.shelter.hide();

I do not see the Loading shelter at all. If I put an alert message after this.shelter.show(); I can see the loading shelter and it is hidden when the function finishes.

I call myFunction via a click event on a button on my widget. Basically I would like the following workflow;

1 User clicks button

2 widget tells user that processing has started and show shelter with message

3 hide shelter when processing is finished.

Could this be due to the fact that Javascript is single threaded? Is there another way I can achieve this?

[RobertScheitlin__GISP · Accepted solution]

Sure. The way to ensure that the loading shelter appears is call shelter.show() then add a setTimeout for 500 (half a second) and inside the setTimeout function call your actual code.

[wadsonmakari]

Thank you very much that worked very well.