Some style changes and PR updates.

Author: hfekete

src/app.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { StatusCodes } from 'http-status-codes'
 
-const appLoading = ref(true)
 // // errors
 const errorDisplay = ref(false)
 const errorContactInfo = ref(false)
@@ -10,22 +9,25 @@ const errorInfo: Ref<DialogOptionsI | null> = ref(null)
 const account = useBcrosAccount()
 const { accountErrors } = storeToRefs(account)
 
-const { dashboardIsLoading } = storeToRefs(useBcrosDashboardUi())
+const { trackUiLoadingStart, trackUiLoadingStop } = useBcrosDashboardUi()
+const loaderTrackingId = 'main-app-loading'
 
 onMounted(async () => {
-  appLoading.value = true
+  trackUiLoadingStart(loaderTrackingId)
   if (accountErrors.value?.length > 0) {
     handleError(accountErrors.value[0])
-    appLoading.value = false
+    trackUiLoadingStop(loaderTrackingId)
     return
   }
   if (account.currentAccount?.id) {
     // load account products
     console.info('Loading active products...', account.currentAccount)
     await account.setActiveProducts()
-    if (accountErrors.value?.length > 0) { return }
+    if (accountErrors.value?.length > 0) {
+      return
+    }
   }
-  appLoading.value = false
+  trackUiLoadingStop(loaderTrackingId)
   console.info('App ready')
 })
 
@@ -57,7 +59,7 @@ const handleError = (error: ErrorI) => {
       errorInfo.value = getDefaultError()
       errorContactInfo.value = true
       errorDisplay.value = true
-      // Sentry.captureException(error)
+    // Sentry.captureException(error)
   }
 }
 
@@ -68,7 +70,11 @@ const clearDialog = () => {
 }
 
 // watchers for errors
-watch(accountErrors.value, (val) => { if (val && val.length > 0) { handleError(val[0]) } })
+watch(accountErrors.value, (val) => {
+  if (val && val.length > 0) {
+    handleError(val[0])
+  }
+})
 </script>
 
 <template>
@@ -88,10 +94,7 @@ watch(accountErrors.value, (val) => { if (val && val.length > 0) { handleError(v
           <bcros-contact-info class="font-normal font-16 mt-4" :contacts="getContactInfo('registries')" />
         </template>
       </bcros-dialog>
-      <div v-if="dashboardIsLoading || appLoading">
-        <BcrosLoadingIcon class="animate-spin text-6xl text-gray-700 absolute top-40 left-[50%]" />
-      </div>
-      <NuxtPage v-else />
+      <NuxtPage />
     </NuxtLayout>
   </div>
 </template>

src/components/bcros/LoadingIcon.vue

@@ -1,3 +1,3 @@
 <template>
-  <UIcon class="text-5xl animate-spin" name="i-mdi-loading" data-cy="loading-icon" />
+  <UIcon class="text-6xl text-gray-700 animate-spin" name="i-mdi-loading" data-cy="loading-icon" />
 </template>

src/layouts/business.vue

@@ -2,6 +2,8 @@
 const route = useRoute()
 const { isStaffAccount } = useBcrosAccount()
 
+const { dashboardIsLoading } = storeToRefs(useBcrosDashboardUi())
+
 const crumbConstructors = computed(() => {
   if (isStaffAccount) {
     return (route?.meta?.staffBreadcrumbs || []) as (() => BreadcrumbI)[]
@@ -18,7 +20,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="app-container" data-cy="default-layout">
+  <div v-if="dashboardIsLoading" class="w-screen h-screen flex items-center justify-center">
+    <BcrosLoadingIcon />
+  </div>
+  <div v-else class="app-container" data-cy="default-layout">
     <bcros-header />
     <bcros-system-banner
       class="justify-center"

src/layouts/default.vue

@@ -2,6 +2,8 @@
 const route = useRoute()
 const { isStaffAccount } = useBcrosAccount()
 
+const { dashboardIsLoading } = storeToRefs(useBcrosDashboardUi())
+
 const crumbConstructors = computed(() => {
   if (isStaffAccount) {
     return (route?.meta?.staffBreadcrumbs || []) as (() => BreadcrumbI)[]
@@ -18,7 +20,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="app-container" data-cy="default-layout">
+  <div v-if="dashboardIsLoading" class="w-screen h-screen flex items-center justify-center">
+    <BcrosLoadingIcon />
+  </div>
+  <div v-else class="app-container" data-cy="default-layout">
     <bcros-header />
     <bcros-system-banner
       class="justify-center"

src/stores/ui.ts

@@ -7,7 +7,7 @@ export const useBcrosDashboardUi = defineStore('bcros/dashboardUi', () => {
   }
 
   const trackUiLoadingStop = (trackerUuidDone: string) => {
-    const index = uiIsLoading.value.find(tracker => tracker === trackerUuidDone)
+    const index = uiIsLoading.value.findIndex(tracker => tracker === trackerUuidDone)
     if (index !== -1) {
       uiIsLoading.value.splice(index, 1)
     }