From c1a7dcd1eb29a3f981e510978b0900c93e8f901a Mon Sep 17 00:00:00 2001
From: msramalho <19508417+msramalho@users.noreply.github.com>
Date: Thu, 6 Feb 2025 20:27:25 +0000
Subject: [PATCH] making UI not jump on signin

---
 src/components/NavBar.vue           |  7 +++++--
 src/components/PermissionNeeded.vue |  7 ++++++-
 src/store/index.js                  | 17 ++++++-----------
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 6e437d0..67e45f1 100644
--- a/src/components/NavBar.vue
+++ b/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>
diff --git a/src/components/PermissionNeeded.vue b/src/components/PermissionNeeded.vue
index 22801b2..31f6afa 100644
--- a/src/components/PermissionNeeded.vue
+++ b/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>
diff --git a/src/store/index.js b/src/store/index.js
index 0dc46ec..f561a69 100644
--- a/src/store/index.js
+++ b/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");