Added progress spinner to wait for response.

Author: alanpeaty

src/components/StoreFinder.vue

@@ -53,6 +53,9 @@
           Stores near you ({{ destinationLocations.length }} results)
         </p>
       </div>
+      <div v-else>
+        <ProgressSpinner v-if="awaitingAPIResponse"/>
+      </div>
       <div
         v-if="destinationLocations.length > 0"
         style="display: flex; gap: 10px; flex-wrap: wrap; width: 100%; text-align: center;"
@@ -125,7 +128,9 @@
         selectedDeparturePlace: "",
         suggestedDeparturePlaces: [],
         departureLocation: {},
-        destinationLocations: []
+        destinationLocations: [],
+        // Are we waiting for an API response?
+        awaitingAPIResponse: false
       }
     },
     watch: {
@@ -193,16 +198,19 @@
           "MaxResults": this.maxResults
         }
         // Hash used to drive caching behaviour on server-side.
+        this.awaitingAPIResponse = true
         this.generateHash(JSON.stringify(post_request)).then(data =>
         {
           axios.post(this.apiEndpoint + "/nearest", post_request, {params: {hash: data}}).then(response => {
             this.destinationLocations = response.data
+            this.awaitingAPIResponse = false
           }).catch(error => {
             console.log(error)
             this.errorMessage = error.message
             if (error.hasOwnProperty("response")) {
               this.errorMessage = this.errorMessage + " " + error.response.data
             }
+            this.awaitingAPIResponse = false
           })
         })
       },

src/main.js

@@ -8,6 +8,7 @@ import Button from "primevue/button"
 import AutoComplete from "primevue/autocomplete"
 import Dropdown from "primevue/dropdown";
 import Message from "primevue/message";
+import ProgressSpinner from 'primevue/progressspinner';
 import "primevue/resources/themes/saga-blue/theme.css"
 import "primevue/resources/primevue.min.css"
 import "primeicons/primeicons.css"
@@ -22,5 +23,6 @@ myApp.component("Button", Button)
 myApp.component("AutoComplete", AutoComplete)
 myApp.component("Dropdown", Dropdown)
 myApp.component("Message", Message)
+myApp.component("ProgressSpinner", ProgressSpinner)
 
 myApp.mount('#app')