better loading check

\

@@ -0,0 +1,119 @@
+<template>
+    <MyNav :user="user" :site_info="site_info" v-if="!isLoading" />
+    <v-main class="ma-4">
+        <v-banner v-if="!site_info.backend_connected" 
+                  icon="mdi-exclamation" 
+                  color="error"
+                  text="Cannot connect to the data service. Please contact support." >
+        </v-banner>
+            <router-view :site_info="site_info" :user_info="user_info"></router-view>
+    </v-main>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+    name: 'App',
+    components: {
+    },
+    emits: ["ready"],
+    data() {
+        return {
+            isLoading: false,
+            site_info: {
+                name: "",
+                features: {},
+                backend_connected: false
+            },
+            user: {
+                first_name: "",
+                last_name: "",
+                email: "",
+                token: "",
+                logged_in: false
+            },
+            user_info: {}
+        }
+    },
+    watch: {
+        'user.logged_in'(val) {
+            console.log("Login status is " + val)
+        },
+        'site_info.name'() {
+            document.title = this.site_info.name
+        }
+    },
+    methods: {
+        checkIfReady(){
+            if (this.site_info.name != "") {
+                this.$emit("ready")
+            }
+        },
+        checkLoginStatus() {
+            let url = this.$api_url + "/users/check_login"
+            console.log("Checking login status...")
+            axios
+                .post(url)
+                .then(resp => {
+                    this.user.logged_in = resp.data.logged_in
+                    this.user.first_name = resp.data.user.first_name
+                    if (this.user.logged_in) {
+                        console.log("Logged in.")
+                        if (window.location.pathname == "/login") {
+                            this.$router.push("/")
+                        }
+                        this.getUserInfo()
+                    } else {
+                        console.log("Not logged in.")
+                        this.$router.push("/login")
+                    }
+                })
+                .catch(error => {
+                    console.log("Error checking login status..." + error)
+                    this.$router.push("/login")
+                })
+
+        },
+        async getSiteInfo() {
+            console.log("Trying to get site Info...")
+            axios
+                .get(this.$api_url + "/info")
+                .then(response => {
+                    this.site_info = response.data
+                    console.log(this.site_info)
+                    this.site_info.backend_connected = true
+                })
+                .catch(error => {
+                    this.site_info.name = "Error getting data connection"
+                    this.site_info.backend_connected = false
+                    console.log(error)
+                    setTimeout(() => {
+                        this.getSiteInfo()
+                    },5000)
+                }).finally(() => {
+                    this.checkIfReady()
+                })
+
+        },
+        async getUserInfo() {
+            let url = this.$api_url + "/users/info"
+            console.log(url)
+            axios.get(url)
+                .then(resp => {
+                    this.user_info = resp.data
+                })
+                .catch(err => {
+                    console.log(err)
+                })
+        }
+    },
+    created() {
+        this.getSiteInfo()
+        if (window.location.pathname != "/login") {
+            this.checkLoginStatus()
+        }
+    }
+
+}
+</script>

src/App.vue

@@ -1,6 +1,6 @@
 <template>
-    <CMCApp :class="{ fadein : !isLoading }" v-if="!isLoading" />
+        <CMCApp @ready="isReady" :class="{ fadein : !isLoading }" />
-    <LoadingScreen :isLoading="isLoading" />
+        <LoadingScreen :isLoading="isLoading" />
 </template>
 <script>
 import CMCApp from './CMCApp.vue'
@@ -15,16 +15,16 @@ export default {
         CMCApp,
         LoadingScreen
     },
-    mounted(){
+    methods: {
-        setTimeout(() => {
+        isReady() {
-            this.isLoading = false;
+            this.isLoading = false
-        },1500);
+        }
-    }
+    },
 }
 </script>
 <style>
 .fadein {
-  animation: fadein 1s forwards;
+    animation: fadein 1s forwards;
 }
 
 @keyframes fadein {

src/CMCApp.vue

@@ -1,14 +1,14 @@
 <template>
     <v-app>
-        <MyNav :user="user" :site_info="site_info" />
+    <MyNav :user="user" :site_info="site_info" v-if="!isLoading" />
-        <v-main class="ma-4">
+    <v-main class="ma-4">
-            <v-banner v-if="!site_info.backend_connected" 
+        <v-banner v-if="!site_info.backend_connected" 
-                      icon="mdi-exclamation" 
+                  icon="mdi-exclamation" 
-                      color="error"
+                  color="error"
-                      text="Cannot connect to the data service. Please contact support." >
+                  text="Cannot connect to the data service. Please contact support." >
-            </v-banner>
+        </v-banner>
-                <router-view :site_info="site_info" :user_info="user_info"></router-view>
+            <router-view :site_info="site_info" :user_info="user_info"></router-view>
-        </v-main>
+    </v-main>
     </v-app>
 </template>
 
@@ -19,10 +19,12 @@ import axios from 'axios'
 export default {
     name: 'App',
     components: {
-        MyNav,
+        MyNav
     },
+    emits: ["ready"],
     data() {
         return {
+            isLoading: true,
             site_info: {
                 name: "",
                 features: {},
@@ -47,6 +49,14 @@ export default {
         }
     },
     methods: {
+        checkIfReady(){
+            if (this.site_info.name != "") {
+                setTimeout(() => {
+                this.isLoading = false
+                this.$emit("ready")
+                },1000)
+            }
+        },
         checkLoginStatus() {
             let url = this.$api_url + "/users/check_login"
             console.log("Checking login status...")
@@ -78,6 +88,7 @@ export default {
                 .get(this.$api_url + "/info")
                 .then(response => {
                     this.site_info = response.data
+                    console.log(this.site_info)
                     this.site_info.backend_connected = true
                 })
                 .catch(error => {
@@ -87,6 +98,8 @@ export default {
                     setTimeout(() => {
                         this.getSiteInfo()
                     },5000)
+                }).finally(() => {
+                    this.checkIfReady()
                 })
 
         },