Wrap list of blacklisted users in a loading box

Author: roschaefer

pages/auth/settings/blacklist.vue

@@ -4,21 +4,25 @@
       {{ $t('auth.settings.blacklist') }}
     </h2>
     <p class="subtitle is-6">{{ $t('auth.settings.blacklistSubtitle') }}</p>
-    <author
-       v-for="(user, index) in blacklistedUsers"
-       :key="user._id"
-       :user="user"
-       />
+    <hc-box :isLoading="isLoading">
+      <author
+         v-for="(user, index) in blacklistedUsers"
+         :key="user._id"
+         :user="user"
+         />
+      </hc-box>
   </div>
 </template>
 
 <script>
 import Author from '~/components/Author/Author.vue'
+import Box from '~/components/Global/Layout/Box/Box.vue'
 import { mapGetters } from 'vuex'
 
   export default {
     components: {
-      'author': Author
+      'author': Author,
+      'hc-box': Box
     },
     data() {
       return {
@@ -28,10 +32,12 @@ import { mapGetters } from 'vuex'
     computed: {
       ...mapGetters({
         loggedInUser: 'auth/user',
-        userSettings: 'feathers-vuex-usersettings/current'
+        userSettings: 'feathers-vuex-usersettings/current',
+        isLoading: 'feathers-vuex-usersettings/isPending'
       })
     },
     async mounted(){
+      await this.$store.dispatch('feathers-vuex-usersettings/loadCurrent', this.loggedInUser)
       const { blacklist = [] } = this.userSettings || {}
       const res = await this.$store.dispatch('feathers-vuex-users/find', {
         query: {