chore: Adds a loader while fetching limits

2025-03-28 15:04:11 +05:30
parent 4e58a2a91d
commit 64111995ac
7 changed files with 30 additions and 34 deletions
@@ -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>
@@ -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>
@@ -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,
  };
 }
@@ -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
@@ -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();
  }
 };

@@ -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>

@@ -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 });
    }
  },