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,4 +1,5 @@
 <template>
+  <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>
@@ -47,6 +48,7 @@
         </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
     })