22059 - loading animation for loading business info.

.eslintrc

@@ -13,6 +13,7 @@
     "vue/no-unused-vars": "warn",
     "vue/multi-word-component-names": "off",
     "vue/no-v-html": "off",
+    "vue/no-multiple-template-root": "off",
     "@typescript-eslint/no-unused-vars": "warn"
   }
-}
+}

cypress/e2e/initial-page-load.cy.ts

@@ -1,12 +1,38 @@
 context('Business Dashboard -> Basic page rendering tests', () => {
-  beforeEach(() => {
+  it('Loads the page with expected text', () => {
     cy.visitBusinessDash()
-  })
 
-  it('Loads the page with expected text', () => {
     cy.get('[data-cy="business-dashboard"]').should('exist')
 
     cy.get('[data-cy="business-dashboard"]').should('contain.text', 'To Do (0)')
     cy.get('[data-cy="business-dashboard"]').should('contain.text', 'Recent Filing History (0)')
   })
+
+  it('Loads indefinite, display loader icon', () => {
+    const legalType = 'BEN'
+    const isHistorical = false
+    const businessIdentifier = 'BC0871427'
+
+    sessionStorage.setItem('FAKE_CYPRESS_LOGIN', 'true')
+    cy.intercept('GET', '**/api/v1/users/**/settings', { fixture: 'settings.json' }).as('getSettings')
+    cy.intercept(
+      'REPORT',
+      'https://app.launchdarkly.com/sdk/evalx/**/context',
+      { fixture: 'ldarklyContext.json' }
+    ).as('getLdarklyContext')
+    cy.intercept('GET', '**/api/v1/orgs/**/products*', { fixture: 'products.json' }).as('getProducts')
+    cy.interceptBusinessContact(businessIdentifier, legalType).as('getBusinessContact')
+    cy.interceptBusinessInfo(businessIdentifier, legalType, isHistorical).as('getBusinessInfo')
+    cy.interceptAddresses(legalType).as('getAddresses')
+    cy.interceptParties(legalType, isHistorical).as('getParties')
+    cy.interceptAffiliationRequests(false, false).as('getAffiliationRequests')
+    cy.interceptTasks('tasksEmpty.json').as('getTasks')
+
+    cy.visit(`/${businessIdentifier}`).then(() => {
+      cy.get('[data-cy="loading-icon"]').should('be.visible').then(() => {
+        cy.wait(['@getBusinessInfo'])
+        cy.get('[data-cy="loading-icon"]').should('not.be.visible')
+      })
+    })
+  })
 })

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,20 +9,25 @@ const errorInfo: Ref<DialogOptionsI | null> = ref(null)
 const account = useBcrosAccount()
 const { accountErrors } = storeToRefs(account)
 
+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')
 })
 
@@ -55,7 +59,7 @@ const handleError = (error: ErrorI) => {
       errorInfo.value = getDefaultError()
       errorContactInfo.value = true
       errorDisplay.value = true
-      // Sentry.captureException(error)
+    // Sentry.captureException(error)
   }
 }
 
@@ -66,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>
@@ -86,13 +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="appLoading">
-        <UIcon
-          name="i-heroicons-arrow-path"
-          class="animate-spin text-[50px] text-gray-700 absolute top-40 left-[50%]"
-        />
-      </div>
-      <NuxtPage v-else />
+      <NuxtPage />
     </NuxtLayout>
   </div>
 </template>

src/components/bcros/LoadingIcon.vue

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

src/components/bcros/businessDetails/index.vue

@@ -30,7 +30,7 @@ watch(currentBusinessContact, updateBusinessDetails)
 async function loadComponentData (identifier: string) {
   if (bootstrap.checkIsTempReg(identifier)) {
     // this is a business bootstrap (actual business does not exist yet)
-    await bootstrap.loadBusinessBootstrap(identifier)
+    bootstrap.loadBusinessBootstrap(identifier)
   } else {
     await business.loadBusiness(identifier)
     await business.loadBusinessContact(identifier)

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-show="dashboardIsLoading" class="w-screen h-screen flex items-center justify-center">
+    <BcrosLoadingIcon />
+  </div>
+  <div v-show="!dashboardIsLoading" 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-show="dashboardIsLoading" class="w-screen h-screen flex items-center justify-center">
+    <BcrosLoadingIcon />
+  </div>
+  <div v-show="!dashboardIsLoading" class="app-container" data-cy="default-layout">
     <bcros-header />
     <bcros-system-banner
       class="justify-center"

src/pages/dashboard.vue

@@ -164,7 +164,7 @@ const pendingAddress = computed(() => {
       return new Date(b.effectiveDate) - new Date(a.effectiveDate)
     })
     const coaFiling = coaFilings[0]
-    if (new Date(coaFiling.effectiveDate) > currentDate) {
+    if (coaFiling?.effectiveDate && new Date(coaFiling?.effectiveDate) > currentDate) {
       return true
     }
   }
@@ -340,6 +340,7 @@ const pendingAddress = computed(() => {
 .bcros-dash-col {
   @apply flex flex-col space-y-5
 }
+
 .bcros-dash-side-col {
   @apply md:w-3/12 md:pl-5 md:pt-0
 }

src/stores/business.ts

@@ -40,7 +40,7 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
   const authApiURL = useRuntimeConfig().public.authApiURL
   const launchdarklyStore = useBcrosLaunchdarkly()
 
-  async function fetchBusinessComments(identifier: string) {
+  async function fetchBusinessComments (identifier: string) {
     commentsLoading.value = true
     comments.value = []
     return await useBcrosFetch<CommentIF>(`${apiURL}/businesses/${identifier}/comments`, {})
@@ -159,6 +159,10 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
   }
 
   async function loadBusiness (identifier: string, force = false) {
+    const { trackUiLoadingStart, trackUiLoadingStop } = useBcrosDashboardUi()
+
+    trackUiLoadingStart('businessInfoLoading')
+
     const businessCached = currentBusiness.value && identifier === currentBusinessIdentifier.value
     if (!businessCached || force) {
       fetchBusinessComments(identifier)
@@ -168,6 +172,7 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
       }
       businessConfig.value = getBusinessConfig(currentBusiness.value.legalType)
     }
+    trackUiLoadingStop('businessInfoLoading')
   }
 
   async function loadBusinessContact (identifier: string, force = false) {
@@ -410,7 +415,8 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
         return (ff && isAllowedToFile(FilingTypes.DISSOLUTION, FilingSubTypeE.DISSOLUTION_VOLUNTARY))
       }
 
-      default: return false // should never happen
+      default:
+        return false // should never happen
     }
   }
 
@@ -459,10 +465,10 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
   }
 
   /**
- * Creates a new comment
- * @param url the full URL to fetch the documents
- * @returns the fetch documents object or throws error
- */
+   * Creates a new comment
+   * @param url the full URL to fetch the documents
+   * @returns the fetch documents object or throws error
+   */
   const postComment = async (businessId: string, comment: CreateCommentI) => {
     const apiURL = useRuntimeConfig().public.legalApiURL
     const url = `${apiURL}/businesses/${businessId}/comments`

src/stores/businessBootstrap.ts

@@ -104,24 +104,15 @@ export const useBcrosBusinessBootstrap = defineStore('bcros/businessBootstrap',
 
   /** Load the bootstrap filing for the temporary identifier */
   const loadBusinessBootstrap = async (identifier: string, force = false) => {
+    const { trackUiLoadingStart, trackUiLoadingStop } = useBcrosDashboardUi()
+    trackUiLoadingStart('boostrapBusinessLoading')
+
     if (!checkIsTempReg(identifier)) {
       // should never be here
       console.error(`Attempted to load ${identifier} as a bootstrap filing.`)
       return
     }
 
-    const storeIsLoading = new Promise((resolve) => {
-      watch(isStoreLoading, (newValue) => {
-        if (newValue === false) { // check the condition
-          resolve(true)
-        }
-      }, { immediate: true })
-    })
-
-    // this acts as semaphore, to check if we already have running loadBusinessBootstrap for current/another business
-    // because there is a possibility to have race conditions to some of the variables if it's started in another thread
-    await storeIsLoading
-
     const bootsrapCached = bootstrapIdentifier.value === identifier
     if (!bootsrapCached || force) {
       isStoreLoading.value = true
@@ -131,6 +122,8 @@ export const useBcrosBusinessBootstrap = defineStore('bcros/businessBootstrap',
       }
       isStoreLoading.value = false
     }
+
+    trackUiLoadingStop('boostrapBusinessLoading')
   }
 
   return {

src/stores/ui.ts

@@ -0,0 +1,23 @@
+/** Manages bcros account data */
+export const useBcrosDashboardUi = defineStore('bcros/dashboardUi', () => {
+  const uiIsLoading = ref([])
+
+  const trackUiLoadingStart = (trackingUuid: string) => {
+    uiIsLoading.value.push(trackingUuid)
+  }
+
+  const trackUiLoadingStop = (trackerUuidDone: string) => {
+    const index = uiIsLoading.value.findIndex(tracker => tracker === trackerUuidDone)
+    if (index !== -1) {
+      uiIsLoading.value.splice(index, 1)
+    }
+  }
+
+  const dashboardIsLoading = computed(() => uiIsLoading.value.length > 0)
+
+  return {
+    dashboardIsLoading,
+    trackUiLoadingStart,
+    trackUiLoadingStop
+  }
+})