add loading overlay on query

src/App.vue

@@ -10,9 +10,9 @@
       <router-view />
     </main>
 
-    <footer>
+    <!-- <footer>
       <p>footer</p>
-    </footer>
+    </footer> -->
   </div>
 </template>
 

src/pages/Map.vue

@@ -1,52 +1,54 @@
 <template>
-  <div class="d-flex flex-column h-100 px-4 py-3">
-    <div id="maps">
-      <div>
-        <h4>Carte avec duplication</h4>
-        <div class="node-map">
-          <node-map
-            v-if="data"
-            v-bind="mapSingle"
-            :show-id="showId"
-          />
-        </div>
-      </div>
-      <div>
-        <h4>Carte avec liens multiples</h4>
-        <div class="node-map">
-          <node-map
-            v-if="data"
-            v-bind="mapMany"
-            :show-id="showId"
-            id="map-2"
+  <b-overlay :show="loading" rounded="sm" class="h-100">
+    <div class="d-flex flex-column h-100 px-4 py-3">
+      <div id="maps">
+        <div>
+          <h4>Carte avec duplication</h4>
+          <div class="node-map">
+            <node-map
+              v-if="data"
+              v-bind="mapSingle"
+              :show-id="showId"
             />
+          </div>
+        </div>
+        <div>
+          <h4>Carte avec liens multiples</h4>
+          <div class="node-map">
+            <node-map
+              v-if="data"
+              v-bind="mapMany"
+              :show-id="showId"
+              id="map-2"
+            />
+          </div>
         </div>
       </div>
+
+      <b-form class="mt-4">
+        <b-form-group label="Texte de départ :" label-cols="2" class="mb-2">
+          <b-form-select
+            v-model="textId"
+            @input="query"
+            :options="textsDepartOptions"
+          />
+        </b-form-group>
+
+        <b-form-group label="Profondeur :" label-cols="2" class="mb-2">
+          <b-form-spinbutton
+            v-model="depth"
+            @input="query"
+            min="0" max="6"
+            inline
+          />
+        </b-form-group>
+
+        <b-form-checkbox v-model="showId" name="check-button" switch>
+          Afficher les numéros
+        </b-form-checkbox>
+      </b-form>
     </div>
-
-    <b-form class="mt-4">
-      <b-form-group label="Texte de départ :" label-cols="2" class="mb-2">
-        <b-form-select
-          v-model="textId"
-          @input="query"
-          :options="textsDepartOptions"
-        />
-      </b-form-group>
-
-      <b-form-group label="Profondeur :" label-cols="2" class="mb-2">
-        <b-form-spinbutton
-          v-model="depth"
-          @input="query"
-          min="0" max="6"
-          inline
-        />
-      </b-form-group>
-
-      <b-form-checkbox v-model="showId" name="check-button" switch>
-        Afficher les numéros
-      </b-form-checkbox>
-    </b-form>
-  </div>
+  </b-overlay>
 </template>
 
 <script>
@@ -65,6 +67,7 @@ export default {
 
   data () {
     return {
+      loading: false,
       textId: undefined,
       showId: true,
       depth: 3,
@@ -82,15 +85,18 @@ export default {
     query () {
       const { textId: id, depth } = this
       this.data = null
+      this.loading = true
       this.$store.dispatch('GET_TREE_WITH_DEPTH', { id, depth }).then((data) => {
         this.mapSingle = toSingleManyData(data)
         this.mapMany = toManyManyData(data)
         this.data = data
+        this.loading = false
       })
     }
   },
 
   created () {
+    this.loading = true
     this.$store.dispatch('GET_TEXTS_DEPART').then(textsDepart => {
       this.textId = textsDepart[0].id
     })