Show loading spinner when loading namespaces & lists

src/components/home/navigation.vue

@@ -56,7 +56,7 @@
 			</ul>
 		</div>
 
-		<aside class="menu namespaces-lists">
+		<aside class="menu namespaces-lists loader-container" :class="{'is-loading': loading}">
 			<template v-for="n in namespaces">
 				<div :key="n.id">
 					<router-link
@@ -141,7 +141,7 @@
 
 <script>
 import {mapState} from 'vuex'
-import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE} from '@/store/mutation-types'
+import {CURRENT_LIST, IS_FULLPAGE, LOADING, MENU_ACTIVE} from '@/store/mutation-types'
 
 export default {
 	name: 'navigation',
@@ -153,6 +153,7 @@ export default {
 		currentList: CURRENT_LIST,
 		background: 'background',
 		menuActive: MENU_ACTIVE,
+		loading: LOADING,
 	}),
 	beforeCreate() {
 		this.$store.dispatch('namespaces/loadNamespaces')

src/store/modules/namespaces.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 
 import NamespaceService from '../../services/namespace'
+import {setLoading} from '@/store/helper'
 
 export default {
 	namespaced: true,
@@ -87,6 +88,8 @@ export default {
 	},
 	actions: {
 		loadNamespaces(ctx) {
+			const cancel = setLoading(ctx)
+
 			const namespaceService = new NamespaceService()
 			// We always load all namespaces and filter them on the frontend
 			return namespaceService.getAll({}, {is_archived: true})
@@ -108,6 +111,9 @@ export default {
 				.catch(e => {
 					return Promise.reject(e)
 				})
+				.finally(() => {
+					cancel()
+				})
 		},
 		loadNamespacesIfFavoritesDontExist(ctx) {
 			// The first namespace should be the one holding all favorites

src/styles/components/namespaces.scss

@@ -16,6 +16,10 @@ $lists-per-row: 5;
     margin-bottom: 1rem;
   }
 
+  &.loader-container.is-loading {
+    min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
+  }
+
   .namespace {
     &:not(:last-child) {
       margin-bottom: 1rem;

src/styles/theme/navigation.scss

@@ -297,6 +297,14 @@
       &.namespaces-lists {
         padding-top: $navbar-padding / 2;
       }
+
+      &.loader-container.is-loading:after {
+        width: 1.5em;
+        height: 1.5em;
+        top: calc(50% - .75em);
+        left: calc(50% - .75em);
+        border-width: 2px;
+      }
     }
 
     .top-menu {

src/views/namespaces/ListNamespaces.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="content namespaces-list">
+	<div class="content namespaces-list loader-container" :class="{'is-loading': loading}">
 		<router-link :to="{name: 'namespace.create'}" class="button is-success new-namespace">
 			<span class="icon is-small">
 				<icon icon="plus"/>
@@ -66,6 +66,7 @@
 import {mapState} from 'vuex'
 import ListService from '../../services/list'
 import Fancycheckbox from '../../components/input/fancycheckbox'
+import {LOADING} from '@/store/mutation-types'
 
 export default {
 	name: 'ListNamespaces',
@@ -89,6 +90,7 @@ export default {
 		namespaces(state) {
 			return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
 		},
+		loading: LOADING,
 	}),
 	methods: {
 		loadBackgroundsForLists() {