quasar.conf.js

@@ -103,7 +103,7 @@ module.exports = configure(function(ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: ['LocalStorage']
+      plugins: ['LocalStorage', 'Loading']
     },
 
     // animations: 'all', // --- includes all animations

src/components/loading/CircularProgress.vue

@@ -0,0 +1,23 @@
+<template>
+  <q-circular-progress
+    indeterminate
+    show-value
+    font-size="10px"
+    class="q-ma-md"
+    size="80px"
+    :thickness="0.15"
+    color="primary"
+    track-color="grey-3"
+  >
+    <q-avatar size="60px">
+      <img src="logo-dark.svg" />
+    </q-avatar>
+  </q-circular-progress>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
+  name: 'CircularProgress'
+});
+</script>

src/plugins/user/pages/Settings.vue

@@ -7,6 +7,8 @@
       <div
         class="fit row justify-center content-center items-center q-gutter-sm"
       >
+        <circular-progress v-if="sessionsLoading" />
+        <div>tada:: {{ sessionsLoading }}</div>
         <q-card
           class="col-12"
           height=""
@@ -62,10 +64,10 @@
 
 <script lang="ts">
 import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
-import { mainLink } from '../plugin';
-import { platform } from 'os';
+import CircularProgress from 'components/loading/CircularProgress.vue';
 export default defineComponent({
   // name: 'PageName'
+  components: { CircularProgress },
   setup(_, { root }) {
     onBeforeMount(() => {
       root.$store.dispatch('sessions/getSessions');
@@ -101,13 +103,19 @@ export default defineComponent({
     function isThisSession(token: string) {
       return root.$store.getters['user/token'].token == token;
     }
+
+    const sessionsLoading = computed(() => {
+      return root.$store.getters['sessions/loading'];
+    });
+
     return {
       showRootGetters,
       sessions,
       getBrowserIcon,
       getPlatformIcon,
       isThisSession,
-      deleteSession
+      deleteSession,
+      sessionsLoading
     };
   }
 });

src/plugins/user/store/session.ts

@@ -26,7 +26,7 @@ const mutations: MutationTree<SessionInterface> = {
   setSessions(state, sessions: Session[]) {
     state.sessions = sessions;
   },
-  setLoading(state, value) {
+  setLoading(state, value: boolean) {
     state.loading = value;
   }
 };
@@ -71,6 +71,9 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
 const getters: GetterTree<SessionInterface, StateInterface> = {
   sessions(state) {
     return state.sessions;
+  },
+  loading(state) {
+    return state.loading;
   }
 };
 

src/plugins/user/store/user.ts

@@ -3,7 +3,7 @@ import { StateInterface } from 'src/store';
 import { axios } from 'boot/axios';
 import { LoginData } from 'src/plugins/user/models';
 import { AxiosResponse } from 'axios';
-import { LocalStorage } from 'quasar';
+import { LocalStorage, Loading } from 'quasar';
 import { Router } from 'src/router';
 
 export interface Token {
@@ -72,6 +72,7 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
   login({ commit }, data: LoginData) {
     console.log('bla');
     commit('setLoginLoading', true);
+    Loading.show({ message: 'Du wirst eingeloggt' });
     void axios
       .post('http://localhost:5000/auth', data)
       .then((response: AxiosResponse<LoginResponse>) => {
@@ -93,6 +94,7 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
       })
       .finally(() => {
         commit('setLoginLoading', false);
+        Loading.hide();
       });
   }
 };