From 920a98ccf463ef390a2fefedb69f622054bf8cf1 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 21 Jul 2026 15:00:08 +0530
Subject: [PATCH] fix: calls dashboard load race (#15094)

---
 .../components-next/Calls/CallListItem.vue    |  7 +++--
 .../dashboard/calls/pages/CallsIndex.vue      | 30 ++++++++++++-------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Calls/CallListItem.vue b/app/javascript/dashboard/components-next/Calls/CallListItem.vue
index 8b0a56bfd..dd2b3af37 100644
--- a/app/javascript/dashboard/components-next/Calls/CallListItem.vue
+++ b/app/javascript/dashboard/components-next/Calls/CallListItem.vue
@@ -25,8 +25,11 @@ const route = useRoute();
 
 const kind = computed(() => getCallKind(props.call));
 
-const contactName = computed(
-  () => props.call.contact.name || props.call.contact.phoneNumber
+const contactName = computed(() =>
+  (props.call.contact.name || props.call.contact.phoneNumber || '').replace(
+    /^\+/,
+    ''
+  )
 );
 
 const agentActionLabel = computed(() => {
diff --git a/app/javascript/dashboard/routes/dashboard/calls/pages/CallsIndex.vue b/app/javascript/dashboard/routes/dashboard/calls/pages/CallsIndex.vue
index 80f8e08c5..553cbceac 100644
--- a/app/javascript/dashboard/routes/dashboard/calls/pages/CallsIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/calls/pages/CallsIndex.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted } from 'vue';
+import { until } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
@@ -49,7 +50,9 @@ const isVoiceEnabled = computed(
 const calls = computed(() => callHistoryStore.records);
 const meta = computed(() => callHistoryStore.meta);
 const isFetching = computed(() => callHistoryStore.uiFlags.isFetching);
-const inboxesUiFlags = useMapGetter('inboxes/getUIFlags');
+const accountUiFlags = useMapGetter('accounts/getUIFlags');
+
+const isInitializing = ref(true);
 
 // Filters are seeded from the URL so a shared link restores the same view.
 const activity = ref(
@@ -98,20 +101,25 @@ const onPageChange = page => {
   fetchCalls();
 };
 
-// inboxes/get flips isFetching true synchronously, so the spinner shows on the
-// first render and the setup CTA never flashes; hit the calls endpoint only
-// once inboxes confirm voice is on.
-store.dispatch('inboxes/get').then(() => {
-  if (!isVoiceEnabled.value) return;
-  // Only admins see the assignee filter, so only they need the agent list.
-  if (isAdmin.value) store.dispatch('agents/get');
-  fetchCalls();
+onMounted(async () => {
+  try {
+    await Promise.all([
+      store.dispatch('inboxes/get'),
+      until(() => accountUiFlags.value.isFetchingItem).toBe(false),
+    ]);
+    if (!isVoiceEnabled.value) return;
+    // Only admins see the assignee filter, so only they need the agent list.
+    if (isAdmin.value) store.dispatch('agents/get');
+    await fetchCalls();
+  } finally {
+    isInitializing.value = false;
+  }
 });
 </script>
 
 <template>
   <div
-    v-if="inboxesUiFlags.isFetching"
+    v-if="isInitializing"
     class="flex items-center justify-center w-full h-full bg-n-surface-1"
   >
     <Spinner :size="24" />