topic Re: Progress bar / spinner for performing queries w/ js api 4.x in ArcGIS JavaScript Maps SDK Questions

Progress bar / spinner for performing queries w/ js api 4.x

luckachi — Mon, 13 Sep 2021 14:40:42 GMT

I have a data viewer with a few drop downs and buttons that perform different queries (depending on what is selected in the drop down menus) when the search button is clicked. I am looking to add a progress bar, spinner or something on the map that indicates that the query is processing/running but I have not been successful.

The following code does not work as the spinner will remain on the screen the entire time.

/******************** * Display the loading indicator when the view is updating ********************/ watchUtils.whenTrue(view, "updating", function(evt) { $("#loading").show(); }); // Hide the loading indicator when the view stops updating watchUtils.whenFalse(view, "updating", function(evt) { $("#loading").hide(); });

I have also tried to change "updating" to "animation" but that does not seem to work either. Any suggestions would be appreciated!

Re: Progress bar / spinner for performing queries w/ js api 4.x

ReneRubalcava — Mon, 13 Sep 2021 15:33:01 GMT

Odd, that same logics works in this demo.

https://codepen.io/odoe/pen/LYLLXwO

Could be an odd race condition with jQuery, but still odd. You can try using a whenFalseOnce inside the whenTrue method like this demo.

https://codepen.io/odoe/pen/wveeRew?editors=0010

whenTrue(view, "updating", () => { console.log("updating true") loader.active = true; whenFalseOnce(view, "updating", () => { console.log("updating false") loader.active = false; }); });

Re: Progress bar / spinner for performing queries w/ js api 4.x

luckachi — Mon, 13 Sep 2021 16:33:26 GMT

Thank you @ReneRubalcava . I will have to take a look at these examples and see if they solve my problem!

Re: Progress bar / spinner for performing queries w/ js api 4.x

luckachi — Mon, 13 Sep 2021 17:15:36 GMT

@ReneRubalcava this seems to do exactly what I needed but when I have a query that takes a bit longer to process, it either displays for a quick second and disappears or it only shows up once the resultsLayer has loaded with the query results. It won't actually display while the query is processing.

Re: Progress bar / spinner for performing queries w/ js api 4.x

ReneRubalcava — Mon, 13 Sep 2021 17:26:19 GMT

Ah ok. Unless the view or viewlayer initiates the request, updating won't be true until you add results to the map.

What you can do is show the loader just before you make the query, then leave the whenFalse() on the view and it will hide the loader when the results are added to the map and drawn. If you are not displaying results for some reason, you can hide the loader when the results are returned.

Re: Progress bar / spinner for performing queries w/ js api 4.x

luckachi — Mon, 13 Sep 2021 18:05:21 GMT

Thank you @ReneRubalcava - I will try to make these changes and see what happens! I appreciate the help.

Re: Progress bar / spinner for performing queries w/ js api 4.x

luckachi — Tue, 14 Sep 2021 14:28:12 GMT

@ReneRubalcava - thank you for the help, I was able to get the loader to show during the queries, etc. I did have one question however, is there a way to center the loader in the map versus adding it to the ui in the specific corners? Thank you!

Re: Progress bar / spinner for performing queries w/ js api 4.x

ReneRubalcava — Tue, 14 Sep 2021 15:09:35 GMT

You can add it via the "manual" option mentioned in the doc here.

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#add

You'll probably need to wrap it in another div and center it like shown here.

https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element

Re: Progress bar / spinner for performing queries w/ js api 4.x

luckachi — Tue, 14 Sep 2021 16:30:57 GMT

Wonderful, thank you so much!