Wait load on searches

src/components/property/commercial/commercialSearchResults.vue

@@ -37,6 +37,7 @@
             <p>Sorry no listings where found matching your search</p>
           </div>
         </div>
+        <div v-if="wait" id="preloader"></div>
       </div>
     </section>
   </main>
@@ -53,9 +54,12 @@ export default {
     propertyCard,
   },
   data() {
-    return {};
+    return {
+      wait: true,
+    };
   },
   mounted() {
+    this.wait = true;
     console.log(this.propertySearch.salesType);
 
     if (typeof this.propertySearch.propertyUsageType === "undefined") {
@@ -65,7 +69,9 @@ export default {
       this.propertySearch.userName = this.user.username;
     }
 
-    this.searchProperties(this.propertySearch);
+    this.searchProperties(this.propertySearch).then((fulfilled) => {
+      this.wait = false;
+    });
   },
   methods: {
     ...mapActions("propertySearch", [
@@ -94,7 +100,9 @@ export default {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.propertySearch.propertyUsageType = "Residential";
       }
-      this.searchProperties(this.propertySearch);
+      this.searchProperties(this.propertySearch).then((fulfilled) => {
+        this.wait = false;
+      });
       return null;
     },
   },

src/components/property/residential/residentialSearchResults.vue

@@ -37,6 +37,7 @@
             <p>Sorry no listings where found matching your search</p>
           </div>
         </div>
+        <div v-if="wait" id="preloader"></div>
       </div>
     </section>
   </main>
@@ -53,9 +54,12 @@ export default {
     propertyCard,
   },
   data() {
-    return {};
+    return {
+      wait: true,
+    };
   },
   mounted() {
+    this.wait = true;
     console.log(this.propertySearch.salesType);
 
     if (typeof this.propertySearch.propertyUsageType === "undefined") {
@@ -65,7 +69,9 @@ export default {
       this.propertySearch.userName = this.user.username;
     }
 
-    this.searchProperties(this.propertySearch);
+    this.searchProperties(this.propertySearch).then((fulfilled) => {
+      this.wait = false;
+    });
   },
   methods: {
     ...mapActions("propertySearch", [
@@ -94,7 +100,9 @@ export default {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.propertySearch.propertyUsageType = "Residential";
       }
-      this.searchProperties(this.propertySearch);
+      this.searchProperties(this.propertySearch).then((fulfilled) => {
+        this.wait = false;
+      });
       return null;
     },
   },

src/store/modules/property/propertySearch.js

@@ -75,33 +75,38 @@ export default {
       commit("onClearFilter", filter);
     },
     searchProperties({ commit }, item) {
-      if (item.keyword === "") {
-        item.keyword = "All";
-      }
-      if (log.isLoggedIn()) {
-        item.userName = log.getUser().username;
-      } else if (item.userName === "") {
-        item.userName = "Unknown";
-      }
-      if (item.suburb === "") {
-        item.suburb = "All";
-      }
-      if (item.city === "") {
-        item.city = "All";
-      }
-      if (item.province === "") {
-        item.province = "All";
-      }
-      console.log(
-        `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}/${item.availableFrom}/${item.propertyId}`
-      );
-
-      axios
-        .get(
+      return new Promise((resolve, reject) => {
+        if (item.keyword === "") {
+          item.keyword = "All";
+        }
+        if (log.isLoggedIn()) {
+          item.userName = log.getUser().username;
+        } else if (item.userName === "") {
+          item.userName = "Unknown";
+        }
+        if (item.suburb === "") {
+          item.suburb = "All";
+        }
+        if (item.city === "") {
+          item.city = "All";
+        }
+        if (item.province === "") {
+          item.province = "All";
+        }
+        console.log(
           `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}/${item.availableFrom}/${item.propertyId}`
-        )
-        .then(result => commit("updateSearch", result.data))
-        .catch(console.error);
+        );
+
+        axios
+          .get(
+            `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}/${item.availableFrom}/${item.propertyId}`
+          )
+          .then(result => {
+            commit("updateSearch", result.data);
+            resolve();
+          })
+          .catch(errro => reject(new Error(error.message)));
+      });
     },
     searchLatestProperties({ commit }) {
       axios