indicateur de chargement

src/views/feature/Feature_list.vue

@@ -2,10 +2,14 @@
   <div class="fourteen wide column">
     <script type="application/javascript" :src="baseUrl+'/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js'"></script>
     <div class="feature-list-container ui grid">
+      
       <div class="four wide column">
         <h1>Signalements</h1>
       </div>
       <div class="twelve wide column">
+        <div class="ui  dimmer" :class="[ { active: featureLoading }]">
+          <div class="ui large text loader">Chargement</div>
+        </div>
         <div class="ui secondary menu">
           <a
             @click="showMap = true"
@@ -382,6 +386,7 @@ export default {
         ascending:true
       },
       geojsonFeatures:[],
+      featureLoading:false,
       filterStatus:null,
       filterType:null,
       baseUrl:this.$store.state.configuration.BASE_URL,
@@ -660,12 +665,16 @@ export default {
       }
       else{
         const url=`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
+        this.featureLoading=true;
         axios.get(url)
           .then((response) => {
             this.loadFeatures(response.data.features);
+            this.featureLoading=false;
           })
           .catch((error) => {
+            this.featureLoading=false;
             throw error;
+            
           });
       }