web/satellite: fixed balance inconsistency for billing tabs

Made overview tab always fetch account balance on mount.
Made payment methods tab always fetch wallet (which includes wallet balance) on mount.
Account and Wallet balances are queried from transactionsDB so there is no inconsistency on backend side.

Issue:
https://github.com/storj/storj/issues/6093

Change-Id: Ifb63d20040acf03d60ad08eac51b0f20b5b7365d

web/satellite/src/components/account/billing/BillingArea.vue

@@ -40,21 +40,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { RouteConfig } from '@/types/router';
-import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 import { NavigationLink } from '@/types/navigation';
 import { useNotify } from '@/utils/hooks';
-import { useBillingStore } from '@/store/modules/billingStore';
 import { useAppStore } from '@/store/modules/appStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 
 const analyticsStore = useAnalyticsStore();
 const appStore = useAppStore();
-const billingStore = useBillingStore();
+
 const notify = useNotify();
 const router = useRouter();
 const route = useRoute();
@@ -141,21 +139,6 @@ function routeToCoupons(): void {
         router.push(couponsPath);
     }
 }
-
-/**
- * Mounted lifecycle hook after initial render.
- * Fetches account balance and credit cards.
- */
-onMounted(async (): Promise<void> => {
-    try {
-        await Promise.all([
-            billingStore.getBalance(),
-            billingStore.getCreditCards(),
-        ]);
-    } catch (error) {
-        notify.notifyError(error, AnalyticsErrorEventSource.BILLING_AREA);
-    }
-});
 </script>
 
 <style scoped lang="scss">

web/satellite/src/components/account/billing/billingTabs/Overview.vue

@@ -178,7 +178,10 @@ function balanceClicked(): void {
  */
 onMounted(async () => {
     try {
-        await projectsStore.getProjects();
+        await Promise.all([
+            projectsStore.getProjects(),
+            billingStore.getBalance(),
+        ]);
     } catch (error) {
         notify.notifyError(error, AnalyticsErrorEventSource.BILLING_OVERVIEW_TAB);
         isDataFetching.value = false;

web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue

@@ -14,6 +14,7 @@
             />
             <add-token-card-native
                 v-else-if="nativeTokenPaymentsEnabled"
+                :parent-init-loading="parentInitLoading"
                 @showTransactions="showTransactionsTable"
             />
             <add-token-card
@@ -196,6 +197,7 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
 import { DEFAULT_PAGE_LIMIT } from '@/types/pagination';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { useCreateProjectClickHandler } from '@/composables/useCreateProjectClickHandler';
+import { useLoading } from '@/composables/useLoading';
 
 import VButton from '@/components/common/VButton.vue';
 import VLoader from '@/components/common/VLoader.vue';
@@ -235,6 +237,7 @@ const appStore = useAppStore();
 const projectsStore = useProjectsStore();
 
 const { handleCreateProjectClick } = useCreateProjectClickHandler();
+const { isLoading: parentInitLoading, withLoading } = useLoading();
 const notify = useNotify();
 const router = useRouter();
 const route = useRoute();
@@ -479,12 +482,23 @@ function paginationController(page: number, limit: number): void {
     displayedHistory.value = nativePaymentHistoryItems.value.slice((page - 1) * limit, ((page - 1) * limit) + limit);
 }
 
-onMounted((): void => {
+onMounted(async (): Promise<void> => {
     defaultCreditCardSelection.value = creditCards.value.find(c => c.isDefault)?.id ?? '';
 
     if (route.query.action === 'token history') {
         showTransactionsTable();
     }
+
+    await withLoading(async () => {
+        try {
+            await Promise.all([
+                billingStore.getWallet(),
+                billingStore.getCreditCards(),
+            ]);
+        } catch (error) {
+            notify.notifyError(error, AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB);
+        }
+    });
 });
 </script>
 

web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue

@@ -10,7 +10,7 @@
         </div>
 
         <div class="token__content">
-            <div v-if="isLoading" class="token__content__loader-container">
+            <div v-if="isLoading || parentInitLoading" class="token__content__loader-container">
                 <v-loader />
             </div>
             <div v-else-if="!wallet.address" class="token__content__add-funds">
@@ -119,6 +119,10 @@ const notify = useNotify();
 const router = useRouter();
 const route = useRoute();
 
+const props = defineProps<{
+    parentInitLoading: boolean
+}>();
+
 const isLoading = ref<boolean>(false);
 
 /**
@@ -135,19 +139,6 @@ const wallet = computed((): Wallet => {
     return billingStore.state.wallet as Wallet;
 });
 
-/**
- * getWallet tries to get an existing wallet for this user. this will not claim a wallet.
- */
-async function getWallet(): Promise<void> {
-    if (wallet.value.address) {
-        return;
-    }
-
-    isLoading.value = true;
-    await billingStore.getWallet().catch(_ => {});
-    isLoading.value = false;
-}
-
 /**
  * claimWallet claims a wallet for the current account.
  */
@@ -189,8 +180,6 @@ function onAddTokensClick(): void {
 }
 
 onMounted(async (): Promise<void> => {
-    await getWallet();
-
     // check if user navigated here from Billing overview screen
     if (route.query.action !== 'add tokens') {
         return;