From 64111995acd50ab24d35ec99dce1ba957626a19c Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Fri, 28 Mar 2025 15:04:11 +0530
Subject: [PATCH] chore: Adds a loader while fetching limits

---
 .../pageComponents/document/LimitBanner.vue     |  6 ++----
 .../pageComponents/response/LimitBanner.vue     |  6 ++----
 .../dashboard/composables/useCaptain.js         |  7 -------
 .../dashboard/routes/dashboard/Dashboard.vue    | 17 ++++++++++++++++-
 .../routes/dashboard/settings/billing/Index.vue | 10 ++--------
 .../routes/dashboard/upgrade/UpgradePage.vue    | 14 ++++----------
 .../dashboard/store/modules/accounts.js         |  4 ++++
 7 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue
index d4f512f39..01d8169c9 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/LimitBanner.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed } from 'vue';
+import { computed } from 'vue';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useCaptain } from 'dashboard/composables/useCaptain';
 import { useRouter } from 'vue-router';
@@ -9,7 +9,7 @@ import Banner from 'dashboard/components-next/banner/Banner.vue';
 const router = useRouter();
 const { accountId } = useAccount();
 
-const { documentLimits, fetchLimits } = useCaptain();
+const { documentLimits } = useCaptain();
 
 const openBilling = () => {
   router.push({
@@ -24,8 +24,6 @@ const showBanner = computed(() => {
   const { currentAvailable } = documentLimits.value;
   return currentAvailable === 0;
 });
-
-onMounted(fetchLimits);
 </script>
 
 <template>
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue b/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue
index 0b5462f0b..e2fb64609 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed } from 'vue';
+import { computed } from 'vue';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useCaptain } from 'dashboard/composables/useCaptain';
 import { useRouter } from 'vue-router';
@@ -9,7 +9,7 @@ import Banner from 'dashboard/components-next/banner/Banner.vue';
 const router = useRouter();
 const { accountId } = useAccount();
 
-const { responseLimits, fetchLimits } = useCaptain();
+const { responseLimits } = useCaptain();
 
 const openBilling = () => {
   router.push({
@@ -26,8 +26,6 @@ const showBanner = computed(() => {
 
   return consumed / totalCount > 0.8;
 });
-
-onMounted(fetchLimits);
 </script>
 
 <template>
diff --git a/app/javascript/dashboard/composables/useCaptain.js b/app/javascript/dashboard/composables/useCaptain.js
index d28560944..e203efd39 100644
--- a/app/javascript/dashboard/composables/useCaptain.js
+++ b/app/javascript/dashboard/composables/useCaptain.js
@@ -1,11 +1,9 @@
 import { computed } from 'vue';
-import { useStore } from 'dashboard/composables/store.js';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 export function useCaptain() {
-  const store = useStore();
   const { isCloudFeatureEnabled, currentAccount } = useAccount();
 
   const captainEnabled = computed(() => {
@@ -32,15 +30,10 @@ export function useCaptain() {
     return null;
   });
 
-  const fetchLimits = () => {
-    store.dispatch('accounts/limits');
-  };
-
   return {
     captainEnabled,
     captainLimits,
     documentLimits,
     responseLimits,
-    fetchLimits,
   };
 }
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 7de36102b..0b058937d 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -9,6 +9,7 @@ import AccountSelector from 'dashboard/components/layout/sidebarComponents/Accou
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
 import UpgradePage from 'dashboard/routes/dashboard/upgrade/UpgradePage.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
@@ -37,6 +38,7 @@ export default {
     AddLabelModal,
     NotificationPanel,
     UpgradePage,
+    Spinner,
   },
   setup() {
     const upgradePageRef = ref(null);
@@ -64,6 +66,8 @@ export default {
   computed: {
     ...mapGetters({
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      accountUIFlags: 'accounts/getUIFlags',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
     }),
     currentRoute() {
       return ' ';
@@ -116,6 +120,7 @@ export default {
     },
   },
   mounted() {
+    this.fetchLimits();
     this.handleResize();
     this.$nextTick(this.checkBanner);
     window.addEventListener('resize', this.handleResize);
@@ -129,6 +134,10 @@ export default {
   },
 
   methods: {
+    fetchLimits() {
+      if (!this.isOnChatwootCloud) return;
+      this.$store.dispatch('accounts/limits');
+    },
     checkBanner() {
       this.hasBanner =
         document.getElementsByClassName('woot-banner').length > 0;
@@ -216,7 +225,13 @@ export default {
         ref="upgradePageRef"
         :bypass-upgrade-page="bypassUpgradePage"
       />
-      <template v-if="!showUpgradePage">
+      <div
+        v-if="accountUIFlags.isFetchingLimits"
+        class="flex items-center justify-center w-full h-full"
+      >
+        <Spinner size="32" class="text-n-brand" />
+      </div>
+      <template v-else-if="!showUpgradePage">
         <router-view />
         <CommandBar />
         <NotificationPanel
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
index fc3905014..5110817c6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
@@ -14,13 +14,8 @@ import SettingsLayout from '../SettingsLayout.vue';
 import ButtonV4 from 'next/button/Button.vue';
 
 const { currentAccount } = useAccount();
-const {
-  captainEnabled,
-  captainLimits,
-  documentLimits,
-  responseLimits,
-  fetchLimits,
-} = useCaptain();
+const { captainEnabled, captainLimits, documentLimits, responseLimits } =
+  useCaptain();
 
 const uiFlags = useMapGetter('accounts/getUIFlags');
 const store = useStore();
@@ -62,7 +57,6 @@ const hasABillingPlan = computed(() => {
 const fetchAccountDetails = async () => {
   if (!hasABillingPlan.value) {
     store.dispatch('accounts/subscription');
-    fetchLimits();
   }
 };
 
diff --git a/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue b/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue
index c23d3e76b..d6185aa56 100644
--- a/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { onMounted, computed, defineExpose, defineProps } from 'vue';
-import { useStore } from 'dashboard/composables/store';
+import { computed, defineExpose, defineProps } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useRouter } from 'vue-router';
 import { useAccount } from 'dashboard/composables/useAccount';
@@ -19,12 +18,12 @@ const props = defineProps({
 });
 
 const router = useRouter();
-const store = useStore();
 const { t } = useI18n();
 const { accountId, currentAccount } = useAccount();
 const { isAdmin } = useAdmin();
 
 const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
+const accountUIFlags = useMapGetter('accounts/getUIFlags');
 
 const testLimit = ({ allowed, consumed }) => {
   return consumed > allowed;
@@ -80,17 +79,14 @@ const isLimitExceeded = computed(() => {
 });
 
 const shouldShowUpgradePage = computed(() => {
+  // Hide upgrade page while fetching limits
+  if (accountUIFlags.isFetchingLimits) return false;
   // Skip upgrade page in Billing, Inbox, and Agent pages
   if (props.bypassUpgradePage) return false;
   if (!isOnChatwootCloud.value) return false;
   if (isTrialAccount.value) return false;
   return isLimitExceeded.value;
 });
-
-const fetchLimits = () => {
-  store.dispatch('accounts/limits');
-};
-
 const routeToBilling = () => {
   router.push({
     name: 'billing_settings_index',
@@ -98,8 +94,6 @@ const routeToBilling = () => {
   });
 };
 
-onMounted(() => fetchLimits());
-
 defineExpose({ shouldShowUpgradePage });
 </script>
 
diff --git a/app/javascript/dashboard/store/modules/accounts.js b/app/javascript/dashboard/store/modules/accounts.js
index fb2c8b89f..4ddd73aa0 100644
--- a/app/javascript/dashboard/store/modules/accounts.js
+++ b/app/javascript/dashboard/store/modules/accounts.js
@@ -18,6 +18,7 @@ const state = {
     isFetchingItem: false,
     isUpdating: false,
     isCheckoutInProcess: false,
+    isFetchingLimits: false,
   },
 };
 
@@ -110,11 +111,14 @@ export const actions = {
   },
 
   limits: async ({ commit }) => {
+    commit(types.default.SET_ACCOUNT_UI_FLAG, { isFetchingLimits: true });
     try {
       const response = await EnterpriseAccountAPI.getLimits();
       commit(types.default.SET_ACCOUNT_LIMITS, response.data);
     } catch (error) {
       // silent error
+    } finally {
+      commit(types.default.SET_ACCOUNT_UI_FLAG, { isFetchingLimits: false });
     }
   },