From c04334fd6819dafa8aec680e7f29e799c9463053 Mon Sep 17 00:00:00 2001
From: Patrick Wang <peinan.wang@gov.bc.ca>
Date: Tue, 31 Dec 2024 16:32:05 -0800
Subject: [PATCH 1/3] Add the 'Fetching Data' spinner for downloading business
 summary and loading document lists

---
 src/components/bcros/LoadingModal.vue         | 26 +++++++++++++++++++
 .../bcros/businessDetails/Links.vue           | 24 +++--------------
 .../bcros/filing/CommonTemplate.vue           | 12 +++++++--
 .../bcros/filing/common/HeaderActions.vue     | 14 ++++++++--
 src/layouts/business.vue                      |  7 +++--
 src/layouts/default.vue                       |  7 +++--
 src/stores/ui.ts                              |  2 ++
 src/utils/download-file.ts                    |  2 --
 8 files changed, 59 insertions(+), 35 deletions(-)
 create mode 100644 src/components/bcros/LoadingModal.vue

diff --git a/src/components/bcros/LoadingModal.vue b/src/components/bcros/LoadingModal.vue
new file mode 100644
index 00000000..5f2123d8
--- /dev/null
+++ b/src/components/bcros/LoadingModal.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+const open = defineModel('open', { type: Boolean, required: true })
+defineProps({ spinnerText: { type: String, required: false, default: undefined } })
+</script>
+
+<template>
+  <UModal
+    v-model="open"
+    prevent-close
+    transition
+    :ui="{
+      background: 'bg-transparent',
+      shadow: 'shadow-none',
+      overlay: {
+        background: 'bg-gray-800/75 dark:bg-gray-800/75',
+      }
+    }"
+  >
+    <div class="w-full h-full text-center items-center">
+      <BcrosLoadingIcon />
+      <p v-if="spinnerText" class="text-white font-semibold">
+        {{ spinnerText }}
+      </p>
+    </div>
+  </UModal>
+</template>
diff --git a/src/components/bcros/businessDetails/Links.vue b/src/components/bcros/businessDetails/Links.vue
index fb1382d4..39dd60db 100644
--- a/src/components/bcros/businessDetails/Links.vue
+++ b/src/components/bcros/businessDetails/Links.vue
@@ -22,8 +22,8 @@ const { isAllowedToFile, isDisableNonBenCorps } = useBcrosBusiness()
 const isCommentOpen = ref(false)
 const isDissolutionDialogOpen = ref(false)
 const { goToCreatePage } = useBcrosNavigate()
+const ui = useBcrosDashboardUi()
 const filings = useBcrosFilings()
-const isFetchingDataSpinner = ref(false)
 
 const isAllowedBusinessSummary = computed(() =>
   !!currentBusinessIdentifier.value &&
@@ -122,7 +122,7 @@ const promptChangeBusinessInfo = () => {
 
 /** Request and Download Business Summary Document. */
 const downloadBusinessSummary = async (): Promise<void> => {
-  isFetchingDataSpinner.value = true
+  ui.fetchingData = true
   const businessId = currentBusiness.value.identifier
   const apiURL = useRuntimeConfig().public.legalApiURL
   const summaryDocument: DocumentI = {
@@ -135,7 +135,7 @@ const downloadBusinessSummary = async (): Promise<void> => {
   if (blob) {
     saveBlob(blob, summaryDocument.filename)
   }
-  isFetchingDataSpinner.value = false
+  ui.fetchingData = false
 }
 
 /** Creates a draft filing and navigates to the Create UI to file a company dissolution filing. */
@@ -183,24 +183,6 @@ const contacts = getContactInfo('registries')
 
 <template>
   <div class="flex flex-wrap gap-x-3 gap-y-1 items-center max-w-bcros">
-    <UModal
-      v-model="isFetchingDataSpinner"
-      prevent-close
-      :ui="{
-        background: 'bg-transparent',
-        shadow: 'shadow-none',
-        overlay: {
-          background: 'bg-gray-800/75 dark:bg-gray-800/75',
-        }
-      }"
-    >
-      <div class="w-full h-full text-center items-center">
-        <BcrosLoadingIcon />
-        <p class="text-white font-semibold">
-          {{ $t('text.general.fetchingData') }}
-        </p>
-      </div>
-    </UModal>
     <!-- Dissolution Confirmation Dialog -->
     <BcrosDialog
       attach="#businessDetails"
diff --git a/src/components/bcros/filing/CommonTemplate.vue b/src/components/bcros/filing/CommonTemplate.vue
index 166a45d1..7ab65b8b 100644
--- a/src/components/bcros/filing/CommonTemplate.vue
+++ b/src/components/bcros/filing/CommonTemplate.vue
@@ -91,6 +91,7 @@ import type { ApiResponseFilingI } from '#imports'
 import { FilingStatusE, isFilingStatus } from '#imports'
 import { loadComments } from '~/utils/filings'
 
+const ui = useBcrosDashboardUi()
 const contacts = getContactInfo('registries')
 const t = useNuxtApp().$i18n.t
 
@@ -109,9 +110,16 @@ const isStatusApproved = computed(() => isFilingStatus(filing.value, FilingStatu
 
 const isShowBody = ref(false)
 
-const showDetails = () => {
+const showDetails = async () => {
   if (filing.value.documents === undefined && filing.value.documentsLink) {
-    loadDocumentList(filing.value)
+    ui.fetchingData = true
+
+    await loadDocumentList(filing.value)
+
+    // wait for another 500ms to show the loading modal
+    await new Promise(resolve => setTimeout(resolve, 250))
+
+    ui.fetchingData = false
   }
   isShowBody.value = !isShowBody.value
 }
diff --git a/src/components/bcros/filing/common/HeaderActions.vue b/src/components/bcros/filing/common/HeaderActions.vue
index 205ed25e..398c3ef8 100644
--- a/src/components/bcros/filing/common/HeaderActions.vue
+++ b/src/components/bcros/filing/common/HeaderActions.vue
@@ -88,6 +88,8 @@
     <UModal v-model="isCommentOpen" :ui="{base: 'absolute left-10 top-5 bottom-5'}">
       <BcrosComment :comments="filing.comments" :filing="filing" @close="showCommentDialog(false)" />
     </UModal>
+
+    <BcrosLoadingModal :open="loadingDocuments" />
   </div>
 </template>
 
@@ -103,6 +105,7 @@ const { isAllowedToFile, isBaseCompany, isDisableNonBenCorps, isEntityCoop, isEn
 const { currentBusiness } = storeToRefs(useBcrosBusiness())
 const { isBootstrapFiling } = useBcrosBusinessBootstrap()
 const { goToEditPage } = useBcrosNavigate()
+const ui = useBcrosDashboardUi()
 
 const isCommentOpen = ref(false)
 const filings = useBcrosFilings()
@@ -323,14 +326,21 @@ const actions: any[][] = [[
   }
 ]]
 
-const handleButtonClick = () => {
+const handleButtonClick = async () => {
   // toggle expansion state
   isExpanded.value = !isExpanded.value
 
   // if the filing has documentsLink but the documents list is empty
   // (i.e., when View More is clicked for the first time), load the documents list
   if (filing.value.documents === undefined && filing.value.documentsLink) {
-    loadDocumentList(filing.value)
+    ui.fetchingData = true
+
+    await loadDocumentList(filing.value)
+
+    // wait for another 500ms to show the loading modal
+    await new Promise(resolve => setTimeout(resolve, 500))
+
+    ui.fetchingData = false
   }
 }
 </script>
diff --git a/src/layouts/business.vue b/src/layouts/business.vue
index 62ff8b0c..161fd6c5 100644
--- a/src/layouts/business.vue
+++ b/src/layouts/business.vue
@@ -2,7 +2,7 @@
 const route = useRoute()
 const { isStaffAccount } = useBcrosAccount()
 
-const { dashboardIsLoading } = storeToRefs(useBcrosDashboardUi())
+const { dashboardIsLoading, fetchingData } = storeToRefs(useBcrosDashboardUi())
 
 const crumbConstructors = computed(() => {
   if (isStaffAccount) {
@@ -20,9 +20,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-show="dashboardIsLoading" class="w-screen h-screen flex items-center justify-center">
-    <BcrosLoadingIcon />
-  </div>
+  <BcrosLoadingModal :open="dashboardIsLoading" spinner-text="Loading Dashboard" />
+  <BcrosLoadingModal :open="fetchingData" spinner-text="Fetching Data" />
   <div v-show="!dashboardIsLoading" class="app-container" data-cy="default-layout">
     <bcros-header />
     <div class="justify-center">
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 7ce70df2..eb0f8771 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -2,7 +2,7 @@
 const route = useRoute()
 const { isStaffAccount } = useBcrosAccount()
 
-const { dashboardIsLoading } = storeToRefs(useBcrosDashboardUi())
+const { dashboardIsLoading, fetchingData } = storeToRefs(useBcrosDashboardUi())
 
 const crumbConstructors = computed(() => {
   if (isStaffAccount) {
@@ -20,9 +20,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-show="dashboardIsLoading" class="w-screen h-screen flex items-center justify-center">
-    <BcrosLoadingIcon />
-  </div>
+  <BcrosLoadingModal :open="dashboardIsLoading" spinner-text="Loading Dashboard" />
+  <BcrosLoadingModal :open="fetchingData" spinner-text="Fetching Data" />
   <div v-show="!dashboardIsLoading" class="app-container" data-cy="default-layout">
     <bcros-header />
     <bcros-system-banner
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
index 944ae2a7..79794bc0 100644
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@@ -14,9 +14,11 @@ export const useBcrosDashboardUi = defineStore('bcros/dashboardUi', () => {
   }
 
   const dashboardIsLoading = computed(() => uiIsLoading.value.length > 0)
+  const fetchingData = ref(false)
 
   return {
     dashboardIsLoading,
+    fetchingData,
     trackUiLoadingStart,
     trackUiLoadingStop
   }
diff --git a/src/utils/download-file.ts b/src/utils/download-file.ts
index 093c7a8d..2e70358b 100644
--- a/src/utils/download-file.ts
+++ b/src/utils/download-file.ts
@@ -30,8 +30,6 @@ const camelCaseToWords = (s: string): string => {
  * @param filing the filing object
  */
 export const loadDocumentList = async (filing: ApiResponseFilingI) => {
-  // TO-DO Add a loader state for loading documents #24451
-
   const t = useNuxtApp().$i18n.t
   const unknownStr = `[${t('text.general.unknown')}]`
   const { currentBusinessIdentifier } = storeToRefs(useBcrosBusiness())

From ba6720f75aca93e027fbf7c2afa4cb9890481799 Mon Sep 17 00:00:00 2001
From: Patrick Wang <peinan.wang@gov.bc.ca>
Date: Thu, 2 Jan 2025 08:59:23 -0800
Subject: [PATCH 2/3] clean up

---
 src/components/bcros/LoadingIcon.vue  | 3 ---
 src/components/bcros/LoadingModal.vue | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)
 delete mode 100644 src/components/bcros/LoadingIcon.vue

diff --git a/src/components/bcros/LoadingIcon.vue b/src/components/bcros/LoadingIcon.vue
deleted file mode 100644
index 5bfa250e..00000000
--- a/src/components/bcros/LoadingIcon.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <UIcon class="text-6xl text-gray-700 animate-spin" name="i-mdi-loading" data-cy="loading-icon" />
-</template>
diff --git a/src/components/bcros/LoadingModal.vue b/src/components/bcros/LoadingModal.vue
index 5f2123d8..7667d51b 100644
--- a/src/components/bcros/LoadingModal.vue
+++ b/src/components/bcros/LoadingModal.vue
@@ -17,7 +17,7 @@ defineProps({ spinnerText: { type: String, required: false, default: undefined }
     }"
   >
     <div class="w-full h-full text-center items-center">
-      <BcrosLoadingIcon />
+      <UIcon class="text-6xl text-gray-700 animate-spin" name="i-mdi-loading" data-cy="loading-icon" />
       <p v-if="spinnerText" class="text-white font-semibold">
         {{ spinnerText }}
       </p>

From df9e5fd691ee7dd854d502e649d00ff9a87004e4 Mon Sep 17 00:00:00 2001
From: Patrick Wang <peinan.wang@gov.bc.ca>
Date: Fri, 3 Jan 2025 09:27:58 -0800
Subject: [PATCH 3/3] PR updates

---
 src/components/bcros/businessDetails/Links.vue       | 12 ++++++++----
 src/components/bcros/filing/CommonTemplate.vue       |  9 ++++++---
 src/components/bcros/filing/common/HeaderActions.vue |  9 ++++++---
 src/lang/en.json                                     |  3 ++-
 src/layouts/business.vue                             |  7 ++++---
 src/layouts/default.vue                              |  6 +-----
 src/utils/sleeps.ts                                  |  8 ++++++++
 7 files changed, 35 insertions(+), 19 deletions(-)
 create mode 100644 src/utils/sleeps.ts

diff --git a/src/components/bcros/businessDetails/Links.vue b/src/components/bcros/businessDetails/Links.vue
index 39dd60db..f7f85e4e 100644
--- a/src/components/bcros/businessDetails/Links.vue
+++ b/src/components/bcros/businessDetails/Links.vue
@@ -130,10 +130,14 @@ const downloadBusinessSummary = async (): Promise<void> => {
     filename: `${businessId} Summary - ${todayIsoDateString()}.pdf`,
     link: `${apiURL}/businesses/${businessId}/documents/summary`
   }
-
-  const blob = await fetchDocuments(summaryDocument.link) // todo: show alert box on error
-  if (blob) {
-    saveBlob(blob, summaryDocument.filename)
+  try {
+    const blob = await fetchDocuments(summaryDocument.link)
+    if (blob) {
+      saveBlob(blob, summaryDocument.filename)
+    }
+  } catch (error) {
+    console.error('Failed to download business summary.', error)
+    // TO-DO: #25125 - show the download error dialog
   }
   ui.fetchingData = false
 }
diff --git a/src/components/bcros/filing/CommonTemplate.vue b/src/components/bcros/filing/CommonTemplate.vue
index 7ab65b8b..98a895eb 100644
--- a/src/components/bcros/filing/CommonTemplate.vue
+++ b/src/components/bcros/filing/CommonTemplate.vue
@@ -114,10 +114,13 @@ const showDetails = async () => {
   if (filing.value.documents === undefined && filing.value.documentsLink) {
     ui.fetchingData = true
 
-    await loadDocumentList(filing.value)
+    await loadDocumentList(filing.value).catch((error) => {
+      console.error('Failed to load the document list.', error)
+      // TO-DO: #25125 - show the download error dialog
+    })
 
-    // wait for another 500ms to show the loading modal
-    await new Promise(resolve => setTimeout(resolve, 250))
+    // make the spinner display for another 250ms so it does not flash when the promise resolves quickly
+    await sleep(250)
 
     ui.fetchingData = false
   }
diff --git a/src/components/bcros/filing/common/HeaderActions.vue b/src/components/bcros/filing/common/HeaderActions.vue
index 398c3ef8..d3c53053 100644
--- a/src/components/bcros/filing/common/HeaderActions.vue
+++ b/src/components/bcros/filing/common/HeaderActions.vue
@@ -335,10 +335,13 @@ const handleButtonClick = async () => {
   if (filing.value.documents === undefined && filing.value.documentsLink) {
     ui.fetchingData = true
 
-    await loadDocumentList(filing.value)
+    await loadDocumentList(filing.value).catch((error) => {
+      console.error('Failed to load the document list.', error)
+      // TO-DO: #25125 - show the download error dialog
+    })
 
-    // wait for another 500ms to show the loading modal
-    await new Promise(resolve => setTimeout(resolve, 500))
+    // make the spinner display for another 250ms so it does not flash when the promise resolves quickly
+    await sleep(250)
 
     ui.fetchingData = false
   }
diff --git a/src/lang/en.json b/src/lang/en.json
index f238a56a..a337674f 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -191,7 +191,8 @@
       "act": "Act",
       "the": "The",
       "company": "Company",
-      "fetchingData": "Loading...",
+      "fetchingData": "Fetching Data",
+      "loadingDashboard": "Loading Dashboard",
       "notifications": "Notifications",
       "pendingNotifications": "No notifications | You have {n} pending approval | You have {n} pending approvals",
       "notificationSubLabel": "{n} team member require approval to access this account | {n} team members require approval to access this account"
diff --git a/src/layouts/business.vue b/src/layouts/business.vue
index 161fd6c5..a34f2e63 100644
--- a/src/layouts/business.vue
+++ b/src/layouts/business.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const route = useRoute()
+const t = useNuxtApp().$i18n.t
 const { isStaffAccount } = useBcrosAccount()
 
 const { dashboardIsLoading, fetchingData } = storeToRefs(useBcrosDashboardUi())
@@ -20,13 +21,13 @@ onMounted(async () => {
 </script>
 
 <template>
-  <BcrosLoadingModal :open="dashboardIsLoading" spinner-text="Loading Dashboard" />
-  <BcrosLoadingModal :open="fetchingData" spinner-text="Fetching Data" />
+  <BcrosLoadingModal :open="dashboardIsLoading" :spinner-text="t('text.general.loadingDashboard')" />
+  <BcrosLoadingModal :open="fetchingData" :spinner-text="t('text.general.fetchingData')" />
   <div v-show="!dashboardIsLoading" class="app-container" data-cy="default-layout">
     <bcros-header />
     <div class="justify-center">
       <bcros-system-banner
-        class="justify-center "
+        class="justify-center"
         :message="systemMessage"
       />
     </div>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index eb0f8771..6daeefa9 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -2,8 +2,6 @@
 const route = useRoute()
 const { isStaffAccount } = useBcrosAccount()
 
-const { dashboardIsLoading, fetchingData } = storeToRefs(useBcrosDashboardUi())
-
 const crumbConstructors = computed(() => {
   if (isStaffAccount) {
     return (route?.meta?.staffBreadcrumbs || []) as (() => BreadcrumbI)[]
@@ -20,9 +18,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <BcrosLoadingModal :open="dashboardIsLoading" spinner-text="Loading Dashboard" />
-  <BcrosLoadingModal :open="fetchingData" spinner-text="Fetching Data" />
-  <div v-show="!dashboardIsLoading" class="app-container" data-cy="default-layout">
+  <div class="app-container" data-cy="default-layout">
     <bcros-header />
     <bcros-system-banner
       class="justify-center"
diff --git a/src/utils/sleeps.ts b/src/utils/sleeps.ts
new file mode 100644
index 00000000..eeea354e
--- /dev/null
+++ b/src/utils/sleeps.ts
@@ -0,0 +1,8 @@
+/**
+ * "Sleeps" for specified timeout. Must be awaited.
+ * @param ms Delay to sleep, in milliseconds.
+ * @returns A promise to await upon.
+ */
+export function sleep (ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}