remove limit on get project features and add loader on map

src/views/project/Project_detail.vue

@@ -345,7 +345,15 @@
           </div>
         </div>
         <div class="seven wide column">
-          <div id="map" ref="map"></div>
+          <div
+            :class="{ active: mapLoading }"
+            class="ui inverted dimmer"
+          >
+            <div class="ui text loader">
+              Chargement de a carte...
+            </div>
+          </div>
+          <div id="map" ref="map" />
         </div>
       </div>
 
@@ -366,7 +374,7 @@
                   </div>
                   <div class="ui relaxed list">
                     <div
-                      v-for="(item, index) in features"
+                      v-for="(item, index) in features.slice(-5)"
                       :key="item.properties.title + index"
                       class="item"
                     >
@@ -643,7 +651,9 @@ export default {
       projectInfoLoading: true,
       featureTypeImporting: false,
       featuresLoading: true,
-      isFileSizeModalOpen: false
+      isFileSizeModalOpen: false,
+      mapLoading: true,
+      mapFeatures: null
     };
   },
 
@@ -681,7 +691,7 @@ export default {
   watch: {
     map(newValue) {
       if (newValue && this.features && this.features.length) {
-        mapUtil.addFeatures(
+        this.mapFeatures = mapUtil.addFeatures(
           this.features,
           {},
           true,
@@ -693,7 +703,7 @@ export default {
       deep: true,
       handler(newValue, oldValue) {
         if (newValue && newValue.length && newValue !== oldValue && this.map) {
-          mapUtil.addFeatures(
+          this.mapFeatures = mapUtil.addFeatures(
             newValue,
             {},
             true,
@@ -703,6 +713,15 @@ export default {
       }
     },
 
+    mapFeatures: {
+      deep: true,
+      handler(newValue, oldValue) {
+        if (newValue && newValue !== oldValue) {
+          this.mapLoading = false;
+        }
+      }
+    },
+
     feature_types: {
       deep: true,
       handler(newValue, oldValue) {
@@ -731,6 +750,50 @@ export default {
     }
   },
 
+  created() {
+    if (this.user) {
+      projectAPI
+        .getProjectSubscription({ projectSlug: this.$route.params.slug })
+        .then((data) => (this.is_suscriber = data.is_suscriber));
+    }
+    this.$store.commit("feature_type/SET_FEATURE_TYPES", []); //* empty feature_types remaining from previous project
+  },
+
+  mounted() {
+    this.GET_PROJECT_INFO(this.slug)
+      .then(() => {
+        this.projectInfoLoading = false;
+        setTimeout(this.initMap, 1000);
+      })
+      .catch(() => {
+        this.projectInfoLoading = false;
+      });
+    this.GET_PROJECT_FEATURES({
+      project_slug: this.slug,
+      ordering: '-created_on',
+      limit: null,
+      geojson: true
+    })
+      .then(() => {
+        this.featuresLoading = false;
+      })
+      .catch(() => {
+        this.featuresLoading = false;
+      });
+
+    if (this.message) {
+      this.tempMessage = this.message;
+      document
+        .getElementById("message")
+        .scrollIntoView({ block: "end", inline: "nearest" });
+      setTimeout(() => (this.tempMessage = null), 5000); //* hide message after 5 seconds
+    }
+  },
+
+  destroyed() {
+     this.CLEAR_RELOAD_INTERVAL_ID();
+  },
+
   methods: {
     ...mapMutations([
       'SET_RELOAD_INTERVAL_ID',
@@ -937,49 +1000,6 @@ export default {
     },
   },
 
-  created() {
-    if (this.user) {
-      projectAPI
-        .getProjectSubscription({ projectSlug: this.$route.params.slug })
-        .then((data) => (this.is_suscriber = data.is_suscriber));
-    }
-    this.$store.commit("feature_type/SET_FEATURE_TYPES", []); //* empty feature_types remaining from previous project
-  },
-
-  mounted() {
-    this.GET_PROJECT_INFO(this.slug)
-      .then(() => {
-        this.projectInfoLoading = false;
-        setTimeout(this.initMap, 1000);
-      })
-      .catch(() => {
-        this.projectInfoLoading = false;
-      });
-    this.GET_PROJECT_FEATURES({
-      project_slug: this.slug,
-      ordering: '-created_on',
-      limit: 5,
-      geojson: true
-    })
-      .then(() => {
-        this.featuresLoading = false;
-      })
-      .catch(() => {
-        this.featuresLoading = false;
-      });
-
-    if (this.message) {
-      this.tempMessage = this.message;
-      document
-        .getElementById("message")
-        .scrollIntoView({ block: "end", inline: "nearest" });
-      setTimeout(() => (this.tempMessage = null), 5000); //* hide message after 5 seconds
-    }
-  },
-
-  destroyed() {
-     this.CLEAR_RELOAD_INTERVAL_ID();
-  },
 };
 </script>