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>

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,