add Overlay to handle waiting screen with store value enabling its show value

app/src/App.vue

@@ -30,15 +30,16 @@
     </header>
 
     <!-- MAIN -->
-    <breadcrumb />
-
-    <main id="main">
-      <transition v-if="transitions" :name="transitionName">
-        <router-view class="animated" />
-      </transition>
-      <router-view v-else class="static" />
-    </main>
+    <api-wait-overlay>
+      <breadcrumb />
 
+      <main id="main">
+        <transition v-if="transitions" :name="transitionName">
+          <router-view class="animated" />
+        </transition>
+        <router-view v-else class="static" />
+      </main>
+    </api-wait-overlay>
     <!-- FOOTER -->
     <footer>
       <nav>
@@ -77,14 +78,14 @@
 <script>
 import { mapGetters } from 'vuex'
 
+import ApiWaitOverlay from '@/components/ApiWaitOverlay'
+
 export default {
   name: 'App',
 
-  data () {
-    return {
-      transitionName: null
-    }
-  },
+  data: () => ({
+    transitionName: null
+  }),
 
   computed: {
     ...mapGetters(['connected', 'yunohost', 'transitions'])
@@ -107,6 +108,10 @@ export default {
     }
   },
 
+  components: {
+    ApiWaitOverlay
+  },
+
   // This hook is only triggered at page first load
   async created () {
     // From this hook the value of `connected` always come from the localStorage.

app/src/components/ApiWaitOverlay.vue

@@ -0,0 +1,46 @@
+<template>
+  <b-overlay
+    variant="white" rounded="sm" opacity="0.5"
+    no-center
+    :show="waiting"
+  >
+
+    <slot name="default" />
+
+    <template v-slot:overlay>
+      <b-card>
+        <div class="d-flex justify-content-center m-3">
+          <b-spinner />
+        </div>
+        <b-card-title class="text-center" v-t="'api_waiting'" />
+      </b-card>
+    </template>
+  </b-overlay>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'ApiWaitOverlay',
+
+  computed: {
+    ...mapGetters(['waiting'])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+  position: sticky;
+  top: 5vh;
+  margin: 0 5%;
+
+  @include media-breakpoint-up(md) {
+    margin: 0 10%;
+  }
+  @include media-breakpoint-up(lg) {
+    margin: 0 20%;
+  }
+}
+</style>

app/src/helpers/api.js

@@ -52,6 +52,7 @@ export function objectToParams (object, { addLocale = false } = {}) {
  * @return {DigestedResponse} Parsed response's json, response's text or an error.
  */
 export async function handleResponse (response) {
+  store.commit('UPDATE_WAITING', false)
   if (!response.ok) return handleErrors(response)
   // FIXME the api should always return json objects
   const responseText = await response.text()
@@ -150,6 +151,7 @@ export default {
    * @return {Promise<module:api~DigestedResponse>} Promise that resolve the api responses as an array.
    */
   post (uri, data = {}) {
+    store.commit('UPDATE_WAITING', true)
     return this.fetch('POST', uri, data).then(handleResponse)
   },
 
@@ -161,6 +163,7 @@ export default {
    * @return {Promise<module:api~DigestedResponse>} Promise that resolve the api responses as an array.
    */
   put (uri, data = {}) {
+    store.commit('UPDATE_WAITING', true)
     return this.fetch('PUT', uri, data).then(handleResponse)
   },
 
@@ -172,7 +175,9 @@ export default {
    * @return {Promise<('ok'|Error)>} Promise that resolve the api responses as an array.
    */
   delete (uri, data = {}) {
+    store.commit('UPDATE_WAITING', true)
     return this.fetch('DELETE', uri, data).then(response => {
+      store.commit('UPDATE_WAITING', false)
       return response.ok ? 'ok' : handleErrors(response)
     })
   }

app/src/store/info.js

@@ -4,7 +4,8 @@ import router from '@/router'
 export default {
   state: {
     connected: localStorage.getItem('connected') === 'true',
-    yunohost: null // yunohost app infos: Object {version, repo}
+    yunohost: null, // yunohost app infos: Object {version, repo}
+    waiting: false
   },
 
   mutations: {
@@ -15,6 +16,10 @@ export default {
 
     'SET_YUNOHOST_INFOS' (state, yunohost) {
       state.yunohost = yunohost
+    },
+
+    'UPDATE_WAITING' (state, boolean) {
+      state.waiting = boolean
     }
   },
 
@@ -77,6 +82,7 @@ export default {
 
   getters: {
     connected: state => (state.connected),
-    yunohost: state => (state.yunohost)
+    yunohost: state => (state.yunohost),
+    waiting: state => state.waiting
   }
 }