making UI not jump on signin

src/components/NavBar.vue

@@ -24,7 +24,7 @@
 
     <v-spacer v-if="!smAndDown"></v-spacer>
     <span class="user mx-2 pa-2 bg-blue-grey-lighten-5 rounded elevation-2" v-if="user">
-      <span>
+      <span v-if="!loadingUserState">
         <v-chip v-if="user.active" color="green" class="bg-white" prepend-icon="mdi-checkbox-marked-circle"
           variant="outlined">
           active
@@ -88,7 +88,10 @@ export default {
         return "This account has access to at least one feature.";
       }
       return "This account is inactive, please reach out to the Bellingcat team for access.";
-    }
+    },
+		loadingUserState() {
+			return this.$store.state?.loadingUserState;
+		}
   },
 };
 </script>

src/components/PermissionNeeded.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-alert color="orange" icon="mdi-information" class="text-center" style="font-size:x-large">
+	<v-alert v-if="!loadingUserState" color="orange" icon="mdi-information" class="text-center" style="font-size:x-large">
 		To use the <strong>{{ feature }}</strong> feature, you need <strong>permission from Bellingcat's tech
 			team</strong>.
 		<br />
@@ -19,6 +19,11 @@ export default {
 			type: String,
 			required: false
 		}
+	},
+	computed: {
+		loadingUserState() {
+			return this.$store.state?.loadingUserState;
+		}
 	}
 }
 </script>

src/store/index.js

@@ -43,7 +43,7 @@ export default createStore({
     active: false,
     access_token: null,
     sheets: [],
-    loading: false,
+    loadingUserState: false,
     errorMessage: "",
     // # TODO: reenable production API endpoint
     // API_ENDPOINT: "https://auto-archiver-api.bellingcat.com"
@@ -56,6 +56,7 @@ export default createStore({
     },
     setUserActiveState(state, active) {
       state.user.active = active;
+      state.loadingUserState = false;
     },
     setUserPermissions(state, permissions) {
       state.user.permissions = permissions;
@@ -67,8 +68,8 @@ export default createStore({
     setSheets(state, sheets) {
       state.sheets = sheets;
     },
-    setLoading(state, loading) {
-      state.loading = loading;
+    setLoadingUserState(state, loadingUserState) {
+      state.loadingUserState = loadingUserState;
     },
     setAccessToken(state, access_token) {
       state.access_token = access_token;
@@ -87,6 +88,7 @@ export default createStore({
 
         const response = await signInWithCredential(firebaseAuth, credential);
 
+        commit("setLoadingUserState", true);
         commit("setUser", response.user);
         dispatch("checkActiveUser");
         dispatch("checkUserPermissions");
@@ -140,7 +142,7 @@ export default createStore({
               Authorization: `Bearer ${state.access_token}`,
             },
           }
-        );
+        )
         const response = await r.json();
         commit("setUserActiveState", response.active);
         if (response.active === true) {
@@ -195,7 +197,6 @@ export default createStore({
 
     async getSheets({ state, commit }) {
       try {
-        commit("setLoading", true);
         commit("setErrorMessage", "");
         if (state.user?.active === false) return;
 
@@ -212,8 +213,6 @@ export default createStore({
           } else {
             throw new Error(JSON.stringify(res));
           }
-        }).finally(() => {
-          commit("setLoading", false);
         });
 
       } catch (error) {
@@ -222,8 +221,6 @@ export default createStore({
 
     },
     async createSheet({ state, dispatch, commit }, name) {
-      commit("setLoading", true);
-
       return new Promise(async (resolve, reject) => {
         try {
           // create new sheet
@@ -364,7 +361,6 @@ export default createStore({
           }
           reject({ success: false, result: error });
         }
-        commit("setLoading", false);
       });
     },
   },
@@ -399,7 +395,6 @@ export default createStore({
           if (expired) {
             store.dispatch("signout");
           } else {
-            //TODO: merge these into single endpoint in the future
             store.dispatch("checkActiveUser");
             store.dispatch("checkUserPermissions");
             store.dispatch("checkUserUsage");