feat: loading spinner on views navigation

frontend/src/views/settings/Global.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row" v-if="settings !== null">
+  <div class="row" v-if="!loading">
     <div class="column">
       <form class="card" @submit.prevent="save">
         <div class="card-title">
@@ -170,7 +170,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState, mapMutations } from "vuex";
 import { settings as api } from "@/api";
 import UserForm from "@/components/settings/UserForm";
 import Rules from "@/components/settings/Rules";
@@ -191,11 +191,13 @@ export default {
     };
   },
   computed: {
-    ...mapState(["user"]),
+    ...mapState(["user", "loading"]),
     isExecEnabled: () => enableExec,
   },
   async created() {
     try {
+      this.setLoading(true);
+
       const original = await api.get();
       let settings = { ...original, commands: [] };
 
@@ -210,11 +212,14 @@ export default {
 
       this.originalSettings = original;
       this.settings = settings;
+
+      this.setLoading(false);
     } catch (e) {
       this.$showError(e);
     }
   },
   methods: {
+    ...mapMutations(["setLoading"]),
     capitalize(name, where = "_") {
       if (where === "caps") where = /(?=[A-Z])/;
       let splitted = name.split(where);

frontend/src/views/settings/Profile.vue

@@ -103,12 +103,13 @@ export default {
     },
   },
   created() {
+    this.setLoading(false);
     this.locale = this.user.locale;
     this.hideDotfiles = this.user.hideDotfiles;
     this.singleClick = this.user.singleClick;
   },
   methods: {
-    ...mapMutations(["updateUser"]),
+    ...mapMutations(["updateUser", "setLoading"]),
     async updatePassword(event) {
       event.preventDefault();
 

frontend/src/views/settings/Shares.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row">
+  <div class="row" v-if="!loading">
     <div class="column">
       <div class="card">
         <div class="card-title">
@@ -62,11 +62,11 @@ import { share as api, users } from "@/api";
 import moment from "moment";
 import { baseURL } from "@/utils/constants";
 import Clipboard from "clipboard";
-import { mapState } from "vuex";
+import { mapState, mapMutations } from "vuex";
 
 export default {
   name: "shares",
-  computed: mapState(["user"]),
+  computed: mapState(["user", "loading"]),
   data: function () {
     return {
       links: [],
@@ -74,6 +74,8 @@ export default {
     };
   },
   async created() {
+    this.setLoading(true);
+
     try {
       let links = await api.list();
       if (this.user.perm.admin) {
@@ -86,6 +88,8 @@ export default {
             : "";
       }
       this.links = links;
+
+      this.setLoading(false);
     } catch (e) {
       this.$showError(e);
     }
@@ -100,6 +104,7 @@ export default {
     this.clip.destroy();
   },
   methods: {
+    ...mapMutations(["setLoading"]),
     deleteLink: async function (event, link) {
       event.preventDefault();
 

frontend/src/views/settings/User.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="row">
+  <div class="row" v-if="!loading">
     <div class="column">
-      <form v-if="loaded" @submit="save" class="card">
+      <form @submit="save" class="card">
         <div class="card-title">
           <h2 v-if="user.id === 0">{{ $t("settings.newUser") }}</h2>
           <h2 v-else>{{ $t("settings.user") }} {{ user.username }}</h2>
@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import { mapMutations } from "vuex";
+import { mapState, mapMutations } from "vuex";
 import { users as api, settings } from "@/api";
 import UserForm from "@/components/settings/UserForm";
 import deepClone from "lodash.clonedeep";
@@ -69,7 +69,6 @@ export default {
     return {
       originalUser: null,
       user: {},
-      loaded: false,
     };
   },
   created() {
@@ -79,6 +78,7 @@ export default {
     isNew() {
       return this.$route.path === "/settings/users/new";
     },
+    ...mapState(["loading"]),
   },
   watch: {
     $route: "fetchData",
@@ -88,8 +88,10 @@ export default {
     },
   },
   methods: {
-    ...mapMutations(["closeHovers", "showHover", "setUser"]),
+    ...mapMutations(["closeHovers", "showHover", "setUser", "setLoading"]),
     async fetchData() {
+      this.setLoading(true);
+
       try {
         if (this.isNew) {
           let { defaults } = await settings.get();
@@ -106,7 +108,7 @@ export default {
           this.user = { ...(await api.get(id)) };
         }
 
-        this.loaded = true;
+        this.setLoading(false);
       } catch (e) {
         this.$router.push({ path: "/settings/users/new" });
       }

frontend/src/views/settings/Users.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row">
+  <div class="row" v-if="!loading">
     <div class="column">
       <div class="card">
         <div class="card-title">
@@ -41,6 +41,7 @@
 </template>
 
 <script>
+import { mapState, mapMutations } from "vuex";
 import { users as api } from "@/api";
 
 export default {
@@ -51,11 +52,20 @@ export default {
     };
   },
   async created() {
+    this.setLoading(true);
+
     try {
       this.users = await api.getAll();
+      this.setLoading(false);
     } catch (e) {
       this.$showError(e);
     }
   },
+  computed: {
+    ...mapState(["loading"]),
+  },
+  methods: {
+    ...mapMutations(["setLoading"]),
+  },
 };
 </script>