src/App.vue

@@ -54,7 +54,7 @@
 						</ul>
 					</div>
 					<aside class="menu namespaces-lists">
-						<p class="menu-label" v-if="loading">Loading...</p>
+						<div class="spinner" :class="{ 'is-loading': loading}"></div>
 						<template v-for="n in namespaces">
 							<div :key="n.id">
 								<router-link v-tooltip.right="'Settings'" :to="{name: 'editNamespace', params: {id: n.id} }" class="nsettings" v-if="n.id > 0">
@@ -148,14 +148,14 @@
                 return 'https://www.gravatar.com/avatar/' + this.user.infos.avatar + '?s=50'
 			},
             loadNamespaces() {
-                this.loading = true
-                this.namespaces = []
+				const cancel = message.setLoading(this)
                 HTTP.get(`namespaces`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(response => {
 						this.$set(this, 'namespaces', response.data)
-                        this.loading = false
+                        cancel()
                     })
                     .catch(e => {
+						cancel()
                         this.handleError(e)
                     })
             },
@@ -173,7 +173,6 @@
 				this.fullpage = true;
 			},
             handleError(e) {
-                this.loading = false
                 message.error(e, this)
             }
         },

src/styles/general.scss

@@ -276,6 +276,22 @@
   }
 }
 
+.spinner{
+  &.is-loading {
+    pointer-events: none;
+    &:after {
+      @include loader;
+      width: 2em;
+      height: 2em;
+      margin-left: calc(50% - 1em);
+      position: absolute;
+      margin-top: 1em;
+      z-index: 999;
+      border-width: 0.25em;
+    }
+  }
+}
+
 .notifications{
   left: 0.5em !important;
   bottom: 1em !important;