From cb685446a501c4e744e545ff13ea65b88a6993b7 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 24 Feb 2026 21:45:01 +0700
Subject: [PATCH] fix: show loading spinner when switching between contact
 threads

Clear old timeline items immediately on thread switch and display a centered
loader until the new conversation loads, instead of showing stale messages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/workspace/CrmWorkspaceApp.vue  |  8 ++++++++
 frontend/app/composables/useTimeline.ts       | 19 +++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/workspace/CrmWorkspaceApp.vue b/frontend/app/components/workspace/CrmWorkspaceApp.vue
index 13b037b..2835334 100644
--- a/frontend/app/components/workspace/CrmWorkspaceApp.vue
+++ b/frontend/app/components/workspace/CrmWorkspaceApp.vue
@@ -259,6 +259,7 @@ const {
 // ---------------------------------------------------------------------------
 const {
   clientTimelineItems,
+  timelineLoading,
   timelineContactId,
   timelineLimit,
   loadClientTimeline,
@@ -1624,6 +1625,12 @@ onBeforeUnmount(() => {
 
                 <div v-else-if="selectedCommThread" class="relative flex h-full min-h-0 flex-col">
                   <div class="comm-thread-surface min-h-0 flex-1 space-y-2 overflow-y-auto px-3 pb-2">
+                    <!-- Loading spinner while timeline is fetching -->
+                    <div v-if="timelineLoading && clientTimelineItems.length === 0" class="flex h-full items-center justify-center">
+                      <span class="loading loading-spinner loading-md text-primary" />
+                    </div>
+
+                    <template v-else>
                     <button
                       class="sticky top-0 z-10 -mx-3 mb-2 flex w-[calc(100%+1.5rem)] items-center gap-2 border-b border-base-300 bg-base-100/80 px-3 py-2 text-left backdrop-blur-sm transition hover:bg-base-100"
                       @click="commPinnedOnly = !commPinnedOnly"
@@ -1900,6 +1907,7 @@ onBeforeUnmount(() => {
                         </div>
                       </div>
                     </div>
+                    </template>
                   </div>
 
                   <div
diff --git a/frontend/app/composables/useTimeline.ts b/frontend/app/composables/useTimeline.ts
index 7fa5464..dcf1d6e 100644
--- a/frontend/app/composables/useTimeline.ts
+++ b/frontend/app/composables/useTimeline.ts
@@ -30,9 +30,13 @@ export function useTimeline(opts: { apolloAuthReady: ComputedRef<boolean> }) {
   );
 
   const clientTimelineItems = ref<ClientTimelineItem[]>([]);
+  const timelineLoading = ref(false);
 
   watch(() => timelineResult.value?.getClientTimeline, (v) => {
-    if (v) clientTimelineItems.value = v as ClientTimelineItem[];
+    if (v) {
+      clientTimelineItems.value = v as ClientTimelineItem[];
+      timelineLoading.value = false;
+    }
   }, { immediate: true });
 
   async function loadClientTimeline(contactId: string, limit = 500) {
@@ -40,18 +44,28 @@ export function useTimeline(opts: { apolloAuthReady: ComputedRef<boolean> }) {
     if (!normalizedContactId) {
       clientTimelineItems.value = [];
       timelineContactId.value = "";
+      timelineLoading.value = false;
       return;
     }
 
+    // Clear old data immediately and show loader
+    clientTimelineItems.value = [];
+    timelineLoading.value = true;
+
     timelineContactId.value = normalizedContactId;
     timelineLimit.value = limit;
-    await refetchTimeline();
+    try {
+      await refetchTimeline();
+    } finally {
+      timelineLoading.value = false;
+    }
   }
 
   async function refreshSelectedClientTimeline(selectedCommThreadId: string) {
     const contactId = String(selectedCommThreadId ?? "").trim();
     if (!contactId) {
       clientTimelineItems.value = [];
+      timelineLoading.value = false;
       return;
     }
     await loadClientTimeline(contactId);
@@ -59,6 +73,7 @@ export function useTimeline(opts: { apolloAuthReady: ComputedRef<boolean> }) {
 
   return {
     clientTimelineItems,
+    timelineLoading,
     timelineContactId,
     timelineLimit,
     loadClientTimeline,