26933 - Add loading overlay during refund view initialization (#251)

* add loading overlay during refund view initialization

* 1.3.11

* tweaks

* modify style

* Hide $NAN until loaded

Author: Jxio

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fas-ui",
-  "version": "1.3.10",
+  "version": "1.3.11",
   "private": true,
   "main": "./lib/lib.umd.min.js",
   "appName": "FAS UI",

package.json

@@ -3,6 +3,12 @@
     id="shortname-details"
     class="view-container"
   >
+    <v-overlay :value="isInitialLoading">
+      <v-progress-circular
+        indeterminate
+        size="24"
+      ></v-progress-circular>
+    </v-overlay>
     <div class="view-header flex-column">
       <h1 class="view-header__title">
         Refund Information
@@ -50,7 +56,7 @@
                 <v-col class="col-6 col-sm-3 font-weight-bold">
                   Unsettled Amount on Short Name
                 </v-col>
-                <v-col class="pl-0">
+                <v-col class="pl-0" v-show="!isInitialLoading">
                   {{ formatCurrency(Number(shortNameDetails.creditsRemaining)) }}
                 </v-col>
               </v-row>
@@ -67,6 +73,7 @@
                   v-if="readOnly"
                   data-test="refundAmountReadOnly"
                   class="pl-0"
+                  v-show="!isInitialLoading"
                 >
                   {{ formatCurrency(Number(refundDetails.refundAmount)) }}
                 </v-col>
@@ -79,6 +86,7 @@
                   data-test="refundAmount"
                   :rules="refundAmountRules"
                   :disabled="isFormDisabled"
+                  v-show="!isInitialLoading"
                 />
               </v-row>
 
@@ -430,6 +438,7 @@ export default defineComponent({
     const eftRefundAddressState = useEFTRefundAddress()
     const state = reactive({
       ...eftRefundAddressState,
+      isInitialLoading: true,
       entityName: undefined as string,
       shortNameDetails: {} as ShortNameDetails,
       refundDetails: {} as EFTRefund,
@@ -501,6 +510,7 @@ export default defineComponent({
     }
 
     onMounted(async () => {
+      state.isInitialLoading = true
       await loadShortnameDetails()
       if (props.shortNameId && props.eftRefundId) {
         state.readOnly = true
@@ -509,6 +519,7 @@ export default defineComponent({
         state.refundMethod = props.paramRefundMethod
         prepopulateRefund()
       }
+      state.isInitialLoading = false
     })
 
     function prepopulateRefund () {
@@ -727,4 +738,7 @@ export default defineComponent({
 .item-chip {
   font-size: 16px !important;
 }
+.v-overlay {
+  z-index: 10;
+}
 </style>