add loader inside App for project members and adapt to feature list

src/App.vue

@@ -151,6 +151,11 @@
             </div>
           </div>
         </div>
+        <div :class="{ active: loader.isLoading }" class="ui inverted dimmer">
+          <div class="ui text loader">
+            {{ loader.message }}
+          </div>
+        </div>
         <router-view />
         <!-- //* Les views sont injectées ici -->
       </div>
@@ -194,6 +199,7 @@ export default {
       "USER_LEVEL_PROJECTS",
       "configuration",
       "messages",
+      "loader",
     ]),
     ...mapGetters(["project"]),
     APPLICATION_NAME: function () {
@@ -256,6 +262,11 @@ body {
   flex-direction: column;
 }
 
+/* to display loader between header and footer */
+main {
+  position: relative;
+}
+
 footer {
   margin-top: auto;
 }
@@ -269,28 +280,32 @@ footer {
   background: white !important;
 }
 
+.flex {
+  display: flex;
+}
+
+/* keep above loader */
+#menu-dropdown {
+  z-index: 1001;
+}
+
 @media screen and (min-width: 560px) {
   .mobile {
     display: none !important;
   }
-
   .header-menu {
     min-width: 560px;
   }
-
   .menu.container {
     width: auto !important;
     margin-left: 1em !important;
     margin-right: 1em !important;
   }
-
   .push-right-desktop {
     margin-left: auto;
   }
 }
-.flex {
-  display: flex;
-}
+
 @media screen and (max-width: 560px) {
   .desktop {
     display: none !important;

src/store/index.js

@@ -48,12 +48,11 @@ export default new Vuex.Store({
     USER_LEVEL_PROJECTS: null,
     user_permissions: null,
     messages: [],
-    events: null
-    // events: {
-    //   'events': null,
-    //   'features': null,
-    //   'comments': null
-    // }
+    events: null,
+    loader: {
+      isLoading: false,
+      message: "En cours de chargement"
+    },
   },
 
   mutations: {
@@ -108,7 +107,16 @@ export default new Vuex.Store({
     },
     CLEAR_MESSAGES(state) {
       state.messages = [];
-    }
+    },
+    DISPLAY_LOADER(state, message) {
+      state.loader = { isLoading: true, message }
+    },
+    DISCARD_LOADER(state) {
+      state.loader = {
+        isLoading: false,
+        message: "En cours de chargement"
+      };
+    },
   },
 
   getters: {

src/views/feature/Feature_list.vue

 <template>
   <div class="fourteen wide column">
-    <div class="ui dimmer" :class="[{ active: featureLoading }]"></div>
     <script
       type="application/javascript"
       :src="
@@ -233,7 +232,6 @@ export default {
       },
 
       geojsonFeatures: [],
-      featureLoading: false,
       filterStatus: null,
       filterType: null,
       baseUrl: this.$store.state.configuration.BASE_URL,
@@ -369,15 +367,18 @@ export default {
         this.loadFeatures(this.$store.state.map.geojsonFeatures);
       } else {
         const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
-        this.featureLoading = true;
+        this.$store.commit(
+          "DISPLAY_LOADER",
+          "Récupération des signalements en cours..."
+        );
         axios
           .get(url)
           .then((response) => {
             this.loadFeatures(response.data.features);
-            this.featureLoading = false;
+            this.$store.commit("DISCARD_LOADER");
           })
           .catch((error) => {
-            this.featureLoading = false;
+            this.$store.commit("DISCARD_LOADER");
             throw error;
           });
       }
@@ -429,6 +430,11 @@ export default {
   mounted() {
     this.initMap();
   },
+
+  destroyed() {
+    //* allow user to change page if ever stuck on loader
+    this.$store.commit("DISCARD_LOADER");
+  },
 };
 </script>
 

src/views/project/Project_members.vue

@@ -132,7 +132,12 @@ export default {
     },
 
     async populateMembers() {
+      this.$store.commit(
+        "DISPLAY_LOADER",
+        "Récupération des membres en cours..."
+      );
       await this.fetchMembers().then((members) => {
+        this.$store.commit("DISCARD_LOADER");
         this.projectMembers = members.map((el) => {
           return {
             userLevel: { name: el.level.display, value: el.level.codename },
@@ -149,5 +154,10 @@ export default {
     }
     this.populateMembers();
   },
+
+  destroyed() {
+    //* allow user to change page if ever stuck on loader
+    this.$store.commit("DISCARD_LOADER");
+  },
 };
 </script>
\ No newline at end of file