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

[luckachi]

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!

[ReneRubalcava]

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

[luckachi]

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

[luckachi]

@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.

[ReneRubalcava · Accepted solution]

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.

[luckachi]

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

[luckachi]

@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!

[ReneRubalcava]

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

[luckachi]

Wonderful, thank you so much!