diff --git a/src/App.vue b/src/App.vue
index 90b109a..4724c8a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -127,8 +127,10 @@ export default {
 
   <div id="main-content">
     <MapConcernements>
-      <div class="loading" v-if="mapitems.length === 0">Chargement</div>
-      <template v-else>
+      <transition name="fade">
+        <div class="loading" v-if="mapitems.length === 0">Chargement</div>
+      </transition>
+      <template v-if="mapitems.length > 0">
         <template v-for="(mapitem,index) in mapitems">
           <ConcernementMapItem
             v-if="mapitem.concernement.visible && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone)"
@@ -146,4 +148,13 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 1s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
 </style>