From 8a323ce7dcf3f520c8b2a7c018d4a8a2d2812431 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Wed, 13 Mar 2024 17:44:34 +0200
Subject: [PATCH] web/satellite: fixed low token balance banner blink

Added isLoading flag to not show banner until all the requests are resolved.

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

Change-Id: I71c1a4e335d376d10c7305bac879735d7b8d5f8f
---
 web/satellite/src/views/Projects.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/satellite/src/views/Projects.vue b/web/satellite/src/views/Projects.vue
index 0daf0f481008..b926b0ea2375 100644
--- a/web/satellite/src/views/Projects.vue
+++ b/web/satellite/src/views/Projects.vue
@@ -6,7 +6,7 @@
         <trial-expiration-banner v-if="isTrialExpirationBanner" :expired="isExpired" />
 
         <low-token-balance-banner
-            v-if="isLowBalance && billingEnabled"
+            v-if="!isLoading && isLowBalance && billingEnabled"
             cta-label="Go to billing"
             @click="redirectToBilling"
         />
@@ -144,6 +144,7 @@ const isJoinProjectDialogShown = ref<boolean>(false);
 const isCreateProjectDialogShown = ref<boolean>(false);
 const addMemberProjectId = ref<string>('');
 const isAddMemberDialogShown = ref<boolean>(false);
+const isLoading = ref<boolean>(true);
 
 /**
  * Indicates if billing features are enabled.
@@ -241,13 +242,15 @@ function formattedValue(value: Size): string {
     }
 }
 
-onMounted(() => {
+onMounted(async () => {
     if (configStore.state.config.nativeTokenPaymentsEnabled && billingEnabled.value) {
-        Promise.all([
+        await Promise.all([
             billingStore.getBalance(),
             billingStore.getCreditCards(),
             billingStore.getNativePaymentsHistory(),
         ]).catch(_ => {});
     }
+
+    isLoading.value = false;
 });
 </script>