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

1047
8
Jump to solution
09-13-2021 07:39 AM
luckachi
Occasional Contributor

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!

1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II

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.

View solution in original post

8 Replies
ReneRubalcava
Frequent Contributor II

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
Occasional Contributor

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

0 Kudos
luckachi
Occasional Contributor

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

0 Kudos
ReneRubalcava
Frequent Contributor II

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
Occasional Contributor

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

0 Kudos
luckachi
Occasional Contributor

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

0 Kudos
ReneRubalcava
Frequent Contributor II

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
Occasional Contributor

Wonderful, thank you so much!

0 Kudos