Using a loading icon with a query that could be empty

236
1
10-08-2021 08:33 AM
luckachi
Occasional Contributor

I have a loading icon active when the view is updating as well as during specific queries in order to inform the user that the query is actually running. We ran into an issue where the query, based on date, returned no data because there was no data submitted yesterday. This caused the loading icon to continuously spin.

Is setting a timeout on the query possible or should I use an if/else state to check if there are no query results to not show the loading icon?  Would that be handled in this query function or elsewhere?

This is the query that is performed when you click on the search button

/* Executes each time the button is clicked.
        Clears results from prev. query then builds a new query.
        Executes query and calls getResultsDate() once promise is resolved. */
        function doQueryDate() {
          resultsLayer.removeAll();
          var startDateQuery = document.getElementById("startDate").value;
          var endDateQuery = document.getElementById("endDate").value;
          params.where = "(DAY >= DATE'" + startDateQuery + "') AND (DAY <= DATE'" + endDateQuery + "')";
          console.log(params.where);
          obsLayer.queryFeatures(params).then(getResultsDate).catch(promiseRejectedDate);
          loader.active = true;
        }

 

0 Kudos
1 Reply
BlakeTerhune
MVP Regular Contributor

I would turn off the loading icon when the query finishes; successfully or not. Use the finally() method of the promise to do this.

You should handle the result of the query separately with some kind of indication/message to the user about the state of the app. If the query was successful but returned no records, just make that clear to the user. If an error was encountered, again, make that clear to the user in a way that they can effectively communicate it to you for debugging.