Wait Animation added to the properties loading

src/components/property/commercial/singleView/carouselSection.vue

@@ -30,16 +30,19 @@
 import carousel from "vue-owl-carousel";
 export default {
   components: {
-    carousel
+    carousel,
   },
   data() {
     return {
-      images: []
+      images: [],
     };
   },
   props: {
-    propertyImages: {}
-  }
+    propertyImages: {},
+  },
+  created() {
+    this.$emit("Loaded", true);
+  },
 };
 </script>
 

src/components/property/commercial/singleView/contentSection.vue

@@ -50,36 +50,41 @@
               <p v-if="field.name === 'Rates & Taxes'">
                 Rates & Taxes: R{{ field.value | toCurrency }}
               </p>
-            </div> -->
+            </div>-->
             <p>{{ property.shortDescription }}</p>
             <p>{{ property.price | toCurrency }}</p>
-            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
+            <div class="btn-white-border">
+              <i class="fa fa-search"></i>BOOK A VIEWING
+            </div>
           </div>
           <div class="panel-left px-5 pb-5 text-center">
             <h4 class="text-white">Share this Property</h4>
             <a
               href="http://www.facebook.com/sharer.php?u=https://www.univateproperties.co.za/"
               target="_blank"
-              ><img src="img/icon-facebook.svg" alt="Share on Facebook" class="col-3 p-1 mx-1"
-            /></a>
+            >
+              <img src="img/icon-facebook.svg" alt="Share on Facebook" class="col-3 p-1 mx-1" />
+            </a>
             <a
               href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://www.univateproperties.co.za/"
-              ><img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1"
-            /></a>
+            >
+              <img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1" />
+            </a>
             <a
               href="whatsapp://send?text=Have a look at this property: https://www.univateproperties.co.za"
               data-action="share/whatsapp/share"
               target="_blank"
             >
-              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1"
-            /></a>
+              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1" />
+            </a>
           </div>
         </div>
         <div class="col-md-8 p-5 resort-profile">
           <h2 v-if="property.showAddress">
-            <div style="display:inline" v-if="property.propertyName !== null">
-              {{ property.propertyName }} /
-            </div>
+            <div
+              style="display:inline"
+              v-if="property.propertyName !== null"
+            >{{ property.propertyName }} /</div>
             {{ property.streetNumber }} {{ property.streetName }}
           </h2>
           <h2 v-else>{{ property.propertyName }}</h2>
@@ -89,9 +94,13 @@
             <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
               <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
                 <div v-if="field.value.toUpperCase() != 'TRUE'">
-                  <i class="fa fa-check-circle"></i> {{ field.value }} {{ field.name }}
+                  <i class="fa fa-check-circle"></i>
+                  {{ field.value }} {{ field.name }}
+                </div>
+                <div v-else>
+                  <i class="fa fa-check-circle"></i>
+                  {{ field.name }}
                 </div>
-                <div v-else><i class="fa fa-check-circle"></i> {{ field.name }}</div>
               </div>
             </div>
           </div>
@@ -101,8 +110,7 @@
             style="float:right"
             class="btn-solid-blue mt-3"
             :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
-            >MORE INFO...</router-link
-          >
+          >MORE INFO...</router-link>
           <h4 v-if="property.video !== null" class="mt-5">Video Tour</h4>
           <iframe
             v-if="property.video !== null"
@@ -146,7 +154,7 @@
                 </tr>
               </tbody>
             </table>
-          </div> -->
+          </div>-->
 
           <!-- <div class="d-flex mt-3">
             <iframe
@@ -171,11 +179,11 @@
 import gallery from "../../../shared/gallerySlideShow";
 export default {
   components: {
-    gallery
+    gallery,
   },
   props: {
     property: {},
-    propertyImages: {}
+    propertyImages: {},
   },
   mounted() {
     console.log(this.property);
@@ -183,7 +191,7 @@ export default {
   data() {
     return {
       index: null,
-      date: new Date()
+      date: new Date(),
     };
   },
   computed: {
@@ -193,8 +201,11 @@ export default {
         list.push(this.propertyImages[i].image);
       }
       return list;
-    }
-  }
+    },
+  },
+  created() {
+    this.$emit("Loaded", true);
+  },
 };
 </script>
 

src/components/property/commercial/singleView/singleCommercialPage.vue

@@ -1,13 +1,19 @@
 <template>
   <div>
-    <carouselSection v-if="propertyImages.length > 0" :propertyImages="propertyImages" />
+    <carouselSection
+      v-if="propertyImages.length > 0"
+      :propertyImages="propertyImages"
+      @Loaded="CarouselDone"
+    />
     <main id="main" style="margin-top:-20px">
       <contentSection
         v-if="propertyImages.length > 0"
         :property="property"
         :propertyImages="propertyImages"
+        @Loaded="ContentDone"
       />
     </main>
+    <div v-if="Wait" id="preloader"></div>
   </div>
   <!-- #intro -->
 </template>
@@ -31,24 +37,31 @@ export default {
     return {
       index: null,
       date: new Date(),
+      wait: false,
+      carouselLoaded: false,
+      contentloaded: false,
     };
   },
-  async mounted() {
-    await this.getProperty(this.$route.params.id);
+  mounted() {
+    this.wait = true;
+    this.carouselLoaded = false;
+    this.contentloaded = false;
+    this.clearPropertyImages();
+    this.getDisplayProperty(this.$route.params.id);
     // await this.getPropertyImages(this.$route.params.id);
     // this.mayEditProperty(this.$route.params.id);
   },
   computed: {
     ...mapState("property", ["property", "propertyImages"]),
-    ...mapState("propertyEdit", ["mayEdit"]),
+    Wait() {
+      if (this.wait && !this.carouselLoaded && !this.contentloaded) {
+        return true;
+      }
+      return false;
+    },
   },
   methods: {
-    ...mapActions("property", [
-      "getProperty",
-      "getPropertyImages",
-      "clearPropertyImages",
-    ]),
-    ...mapActions("propertyEdit", ["mayEditProperty"]),
+    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
     formatPrice(value) {
       const val = (value / 1).toFixed(2);
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
@@ -59,6 +72,12 @@ export default {
       }
       return "";
     },
+    CarouselDone() {
+      this.carouselLoaded = true;
+    },
+    ContentDone() {
+      this.contentloaded = true;
+    },
   },
   beforeDestroy() {
     this.clearPropertyImages();

src/components/property/enquireNow/carouselSection.vue

@@ -20,7 +20,7 @@
       style="margin-top:-50px"
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
     >
-      <img class="item" v-for="(image, i) in images" :key="i" :src="image" />
+      <img class="item" v-for="(image, i) in images" :key="i" :src="image.image" />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>
@@ -33,11 +33,14 @@
 import carousel from "vue-owl-carousel";
 export default {
   components: {
-    carousel
+    carousel,
   },
   props: {
-    images: {}
-  }
+    images: {},
+  },
+  created() {
+    this.$emit("Loaded", true);
+  },
 };
 </script>
 

src/components/property/enquireNow/contentSection.vue

@@ -4,14 +4,16 @@
       <div class="col-md-6">
         <h3>{{ property.propertyName }}</h3>
         <p v-html="property.description"></p>
-        <p><strong>View by Appointment only!</strong></p>
+        <p>
+          <strong>View by Appointment only!</strong>
+        </p>
         <br />
         <p></p>
         <!-- To arrange a viewing contact Mynie:
         <div class="col-md-4">
           <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a><br />
           <a href="tel:0124921238">+27 (0) 12 492 1238</a>
-        </div> -->
+        </div>-->
       </div>
       <div class="col-md-6">
         <div class="form-group row">
@@ -143,7 +145,7 @@ import alert from "../../shared/alert";
 
 export default {
   components: {
-    alert
+    alert,
   },
   data() {
     return {
@@ -153,14 +155,14 @@ export default {
       contactNumber: null,
       property: null,
       message: null,
-      boolSent: false
+      boolSent: false,
     };
   },
   mounted() {
     this.boolSent = false;
   },
   props: {
-    property: {}
+    property: {},
   },
   methods: {
     async sendMail() {
@@ -171,7 +173,7 @@ export default {
         email: this.email,
         phone: this.contactNumber,
         property: this.property.id.toString(),
-        message: this.message
+        message: this.message,
       };
 
       const response = await axios.post("/api/mail/1", mailObj);
@@ -184,8 +186,11 @@ export default {
     },
     countDownChanged(dismissCountDown) {
       this.dismissCountDown = dismissCountDown;
-    }
-  }
+    },
+  },
+  created() {
+    this.$emit("Loaded", true);
+  },
 };
 </script>
 

src/components/property/enquireNow/enquirenow.vue

@@ -1,9 +1,14 @@
 <template>
   <div>
-    <carouselSection v-if="propertyImages.length > 0" :images="propertyImages" />
+    <carouselSection
+      v-if="propertyImages.length > 0"
+      :images="propertyImages"
+      @Loaded="CarouselDone"
+    />
     <main id="main" style="margin-top:-20px;padding-bottom:50px">
-      <contentSection :property="property" />
+      <contentSection :property="property" @Loaded="ContentDone" />
     </main>
+    <div v-if="Wait" id="preloader"></div>
   </div>
 </template>
 
@@ -15,20 +20,32 @@ import contentSection from "./contentSection";
 export default {
   components: {
     carouselSection,
-    contentSection
+    contentSection,
+  },
+  data() {
+    return {
+      wait: false,
+      carouselLoaded: false,
+      contentloaded: false,
+    };
   },
   async mounted() {
-    await this.getProperty(this.$route.params.id);
-    await this.getPropertyImages(this.$route.params.id);
-    this.mayEditProperty(this.$route.params.id);
+    this.wait = true;
+    this.carouselLoaded = false;
+    this.contentloaded = false;
+    await this.getDisplayProperty(this.$route.params.id);
   },
   computed: {
     ...mapState("property", ["property", "propertyImages"]),
-    ...mapState("propertyEdit", ["mayEdit"])
+    Wait() {
+      if (this.wait && !this.carouselLoaded && !this.contentloaded) {
+        return true;
+      }
+      return false;
+    },
   },
   methods: {
-    ...mapActions("property", ["getProperty", "getPropertyImages", "clearPropertyImages"]),
-    ...mapActions("propertyEdit", ["mayEditProperty"]),
+    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
     formatPrice(value) {
       const val = (value / 1).toFixed(2);
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
@@ -38,8 +55,14 @@ export default {
         return `${value}<br/>`;
       }
       return "";
-    }
-  }
+    },
+    CarouselDone() {
+      this.carouselLoaded = true;
+    },
+    ContentDone() {
+      this.contentloaded = true;
+    },
+  },
 };
 </script>
 

src/components/property/residential/singleView/carouselSection.vue

@@ -30,16 +30,19 @@
 import carousel from "vue-owl-carousel";
 export default {
   components: {
-    carousel
+    carousel,
   },
   data() {
     return {
-      images: []
+      images: [],
     };
   },
   props: {
-    propertyImages: {}
-  }
+    propertyImages: {},
+  },
+  created() {
+    this.$emit("Loaded", true);
+  },
 };
 </script>
 

src/components/property/residential/singleView/contentSection.vue

@@ -45,7 +45,9 @@
               </div>
             </div>
 
-            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
+            <div class="btn-white-border">
+              <i class="fa fa-search"></i>BOOK A VIEWING
+            </div>
           </div>
           <div class="panel-left px-5 pb-5 text-center">
             <h4 class="text-white">Share this Property</h4>
@@ -63,23 +65,25 @@
 
             <a
               href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://www.univateproperties.co.za/"
-              ><img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1"
-            /></a>
+            >
+              <img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1" />
+            </a>
             <a
               href="whatsapp://send?text=Check out this property!"
               data-action="share/whatsapp/share"
               target="_blank"
             >
-              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1"
-            /></a>
+              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1" />
+            </a>
           </div>
         </div>
         <div></div>
         <div class="col-md-8 p-5 resort-profile">
           <h2 v-if="property.showAddress">
-            <div style="display:inline" v-if="property.propertyName !== null">
-              {{ property.propertyName }} /
-            </div>
+            <div
+              style="display:inline"
+              v-if="property.propertyName !== null"
+            >{{ property.propertyName }} /</div>
             {{ property.streetNumber }} {{ property.streetName }}
           </h2>
           <h2 v-else>{{ property.propertyName }}</h2>
@@ -96,16 +100,19 @@
               style="float:right"
               class="btn-solid-blue mt-3"
               :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
-              >MORE INFO...</router-link
-            >
+            >MORE INFO...</router-link>
             <h4>Property Features</h4>
 
             <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
               <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
                 <div v-if="field.value.toUpperCase() != 'TRUE'">
-                  <i class="fa fa-check-circle"></i> {{ field.value }} {{ field.name }}
+                  <i class="fa fa-check-circle"></i>
+                  {{ field.value }} {{ field.name }}
+                </div>
+                <div v-else>
+                  <i class="fa fa-check-circle"></i>
+                  {{ field.name }}
                 </div>
-                <div v-else><i class="fa fa-check-circle"></i> {{ field.name }}</div>
               </div>
             </div>
           </div>
@@ -147,11 +154,11 @@ import { ShareFacebook } from "vue-social-sharing";
 export default {
   components: {
     gallery,
-    ShareFacebook
+    ShareFacebook,
   },
   props: {
     property: {},
-    propertyImages: {}
+    propertyImages: {},
   },
   created() {
     //this.getListsForPropertyEdit(this.property.id);
@@ -163,7 +170,7 @@ export default {
     return {
       index: null,
       date: new Date(),
-      currentUrl: ""
+      currentUrl: "",
     };
   },
   methods: {
@@ -192,8 +199,11 @@ export default {
         list.push(this.propertyImages[i].image);
       }
       return list;
-    }
-  }
+    },
+  },
+  created() {
+    this.$emit("Loaded", true);
+  },
 };
 </script>
 

src/components/property/residential/singleView/singleResidentialPage.vue

@@ -1,13 +1,19 @@
 <template>
   <div>
-    <carouselSection v-if="propertyImages.length > 0" :propertyImages="propertyImages" />
+    <carouselSection
+      v-if="propertyImages.length > 0"
+      :propertyImages="propertyImages"
+      @Loaded="CarouselDone"
+    />
     <main id="main" style="margin-top:-20px">
       <contentSection
         v-if="propertyImages.length > 0"
         :property="property"
         :propertyImages="propertyImages"
+        @Loaded="ContentDone"
       />
     </main>
+    <div v-if="Wait" id="preloader"></div>
   </div>
 </template>
 
@@ -31,10 +37,17 @@ export default {
       index: null,
       date: new Date(),
       boolLoaded: false,
+      wait: false,
+      carouselLoaded: false,
+      contentloaded: false,
     };
   },
   async mounted() {
-    await this.getProperty(this.$route.params.id);
+    this.wait = true;
+    this.carouselLoaded = false;
+    this.contentloaded = false;
+    this.clearPropertyImages();
+    await this.getDisplayProperty(this.$route.params.id);
 
     // await this.getPropertyImages(this.$route.params.id);
     // setTimeout(() => {
@@ -47,14 +60,15 @@ export default {
   },
   computed: {
     ...mapState("property", ["property", "propertyImages"]),
-    ...mapState("propertyEdit", ["mayEdit"]),
+    Wait() {
+      if (this.wait && !this.carouselLoaded && !this.contentloaded) {
+        return true;
+      }
+      return false;
+    },
   },
   methods: {
-    ...mapActions("property", [
-      "getProperty",
-      "getPropertyImages",
-      "clearPropertyImages",
-    ]),
+    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
     ...mapActions("propertyEdit", ["mayEditProperty"]),
 
     formatPrice(value) {
@@ -67,6 +81,12 @@ export default {
       }
       return "";
     },
+    CarouselDone() {
+      this.carouselLoaded = true;
+    },
+    ContentDone() {
+      this.contentloaded = true;
+    },
   },
   beforeDestroy() {
     this.clearPropertyImages();

src/store/modules/property/property.js

@@ -75,6 +75,18 @@ export default {
           .catch(error => reject(new Error(error.message)));
       });
     },
+    getDisplayProperty({ commit, dispatch }, id) {
+      return new Promise((resolve, reject) => {
+        axios
+          .get(`/api/Property/getDetailed/${id}`)
+          .then(result => {
+            commit("setProperty", result.data);
+            dispatch("getSavedPropertyImages", result.data.id);
+            resolve();
+          })
+          .catch(error => reject(new Error(error.message)));
+      });
+    },
     getPropertyImages({ commit }, id) {
       axios
         .get(`/api/PropertyImage/GetImagesByProperty/${id}`)