Loading Update for Dotnet 5

src/components/home/propertySection.vue

           </div>
         </div>
       </div>
-      <div class="contianer">
+      <div v-if="boolLoaded" class="contianer">
         <div class="row">
           <div class="col">
             <propertyCard
           </div>
         </div>
       </div>
+      <div v-else class="contianer">
+        <div class="row">
+          <div class="col">
+            <vue-loaders
+              class="my-auto"
+              style="margin-top:50px !important; margin-bottom:50px !important"
+              name="line-spin-fade-loader"
+              color="black"
+              scale="1"
+            ></vue-loaders>
+          </div>
+        </div>
+      </div>
     </div>
   </section>
+
   <!-- #listings -->
 </template>
 
 import { mapState, mapActions } from "vuex";
 import propertyCard from "../property/propertyCard.vue";
 export default {
+  data() {
+    return {
+      boolLoaded: false
+    };
+  },
   components: {
     propertyCard
   },
   },
   methods: {
     ...mapActions("propertySearch", ["searchLatestProperties"]),
-    LoadData() {
-      this.searchLatestProperties();
+    async LoadData() {
+      await this.searchLatestProperties();
       this.$forceUpdate();
     }
   },
   mounted() {
-    this.LoadData();
+    this.LoadData().then(() => {
+      setTimeout(() => {
+        this.boolLoaded = true;
+      }, 100);
+    });
   }
 };
 </script>

src/components/property/commercial/latestListings.vue

           </div>
         </div>
       </div>
-      <div class="contianer">
+      <div v-if="boolLoaded" class="contianer">
         <div class="row">
           <div class="col">
             <propertyCard
           </div>
         </div>
       </div>
+      <div v-else class="contianer">
+        <div class="row">
+          <div class="col">
+            <vue-loaders
+              class="my-auto"
+              style="margin-top:50px !important; margin-bottom:50px !important"
+              name="line-spin-fade-loader"
+              color="black"
+              scale="1"
+            ></vue-loaders>
+          </div>
+        </div>
+      </div>
     </div>
   </section>
 </template>
 import { mapState, mapActions } from "vuex";
 import propertyCard from "../propertyCard";
 export default {
+  data() {
+    return {
+      boolLoaded: false
+    };
+  },
   components: {
     propertyCard
   },
   methods: {
     ...mapActions("propertySearch", ["searchLatestPropertiesType"]),
-    LoadData() {
-      this.searchLatestPropertiesType("Commercial");
+    async LoadData() {
+      await this.searchLatestPropertiesType("Commercial");
       this.$forceUpdate();
     }
   },
   mounted() {
-    this.LoadData();
+    this.LoadData().then(() => {
+      setTimeout(() => {
+        this.boolLoaded = true;
+      }, 100);
+    });
   },
   computed: {
     ...mapState("propertySearch", ["latestProperties"])

src/components/property/residential/latestListings.vue

             </div>
           </div>
         </div>
-        <div class="contianer">
+        <div v-if="boolLoaded" class="contianer">
+          <div class="row">
+            <div class="col">
+              <propertyCard
+                v-if="latestProperties.length > 0"
+                name="propertyholder"
+                :properties="latestProperties"
+                :showSort="false"
+              />
+            </div>
+          </div>
+        </div>
+        <div v-else class="contianer">
           <div class="row">
             <div class="col">
               <propertyCard
 import { mapState, mapActions } from "vuex";
 import propertyCard from "../propertyCard";
 export default {
+  data() {
+    return {
+      boolLoaded: false
+    };
+  },
   components: {
     propertyCard
   },
     }
   },
   mounted() {
-    this.LoadData();
+    this.LoadData().then(() => {
+      setTimeout(() => {
+        this.boolLoaded = true;
+      }, 100);
+    });
   },
   computed: {
     ...mapState("propertySearch", ["latestProperties"])

src/components/timeshare/buy/latestWeeks.vue

         </div>
       </div>
       <div v-else>
-        <vue-loaders-ball-clip-rotate />
+        <vue-loaders
+          class="my-auto"
+          style="margin-top:50px !important; margin-bottom:50px !important; margin-y:50%"
+          name="line-spin-fade-loader"
+          color="black"
+          scale="1"
+        ></vue-loaders>
       </div>
     </div>
   </section>

src/components/timeshare/sell/contentSectionNew.vue

 <template>
-  <section id="contact2">
+  <section v-if="boolLoaded" id="contact2">
     <div class="container">
       <div class="row">
         <div class="col-lg-12">
       <div v-if="wait" id="preloader"></div>
     </div>
   </section>
+  <div v-else>
+    <vue-loaders
+      class="my-auto"
+      style="margin-top:50px !important; margin-bottom:50px !important; margin-left:50%"
+      name="line-spin-fade-loader"
+      color="black"
+      scale="1"
+    ></vue-loaders>
+  </div>
 </template>
 
 <script>
       boolError: false,
       userLoggedIn: Log.isLoggedIn(),
       profileEmailError: false,
-      selectedUserType: "myself"
+      selectedUserType: "myself",
+      boolLoaded: false
     };
   },
   components: {
     if (this.sellItem.id) {
       this.newSale();
     }
-    this.initTimeshare(0);
-    this.getIndividual(Log.getUser().id);
-    this.getBanks();
-    this.getStatusList();
+    this.loadData().then(() => {
+      setTimeout(() => {
+        this.boolLoaded = true;
+      }, 100);
+    });
   },
   created() {
     this.initTimeshare(this.weekId);
     ...mapActions("payment", ["addPayment"]),
     ...mapActions("bank", ["getBanks"]),
     ...mapActions("status", ["getStatusList"]),
+    async loadData() {
+      await this.initTimeshare(0);
+      await this.getIndividual(Log.getUser().id);
+      await this.getBanks();
+      await this.getStatusList();
+    },
     newSale() {
       this.weekId = 0;
       this.getBlankWeek();