fix: provide feedback that initial user data is loading

instead of prompting the user to log in

Author: bayang

src/jelu-ui/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from 'vuex'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, Ref, ref, watch } from 'vue'
 import { key } from './store'
 import { useRoute, useRouter } from 'vue-router'
 import dataService from "./services/DataService";
@@ -21,7 +21,10 @@ console.log("route " + route.fullPath + " " + route.path + " " + route.redirecte
 console.log(route)
 console.log(router.currentRoute.value)
 
+const initialLoad : Ref<boolean> = ref(false)
+
 store.dispatch('setupStatus')
+initialLoad.value = true
 store.dispatch('getUser')
   .then(async () => {
     console.log("then")
@@ -31,13 +34,15 @@ store.dispatch('getUser')
       await router.push(store.state.route)
     }
     console.log("ok nav")
+    initialLoad.value = false
     store.dispatch('getServerSettings')
     // } catch(e) {
     // console.log("error nav")
     // console.log(e)
     // }
   })
   .catch(() => {
+    initialLoad.value = false
     console.log("catch in App")
     router.push({ name: 'login' }).then(() => { console.log("ok nav") }).catch(() => { console.log("error nav") })
   })
@@ -406,6 +411,16 @@ watch(() => route.name, (newVal, oldVal) => {
         </div>
       </label>
     </label>
+    <o-loading
+      v-model:active="initialLoad"
+      :full-page="true"
+      :can-cancel="false"
+    >
+      <!-- loader from https://loading.io/css/ -->
+      <div class="lds-facebook">
+        <div /><div /><div />
+      </div>
+    </o-loading>
   </section>
 </template>
 

src/jelu-ui/src/assets/style.css

@@ -245,4 +245,44 @@
 /* title search input on search page, make it fill column */
 .title-input .o-ctrl-input {
   @apply w-full;
-}
+}
+
+/* loader from https://loading.io/css/ */
+.lds-facebook {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-facebook div {
+  display: inline-block;
+  position: absolute;
+  left: 8px;
+  width: 16px;
+  background: theme('colors.accent');
+  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+}
+.lds-facebook div:nth-child(1) {
+  left: 8px;
+  animation-delay: -0.24s;
+}
+.lds-facebook div:nth-child(2) {
+  left: 32px;
+  animation-delay: -0.12s;
+}
+.lds-facebook div:nth-child(3) {
+  left: 56px;
+  animation-delay: 0;
+}
+@keyframes lds-facebook {
+  0% {
+    top: 8px;
+    height: 64px;
+  }
+  50%, 100% {
+    top: 24px;
+    height: 32px;
+  }
+}
+/* end loader from https://loading.io/css/ */
+