feat: Adds loading indicator to conversation items

Author: allozaur

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarConversationItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Trash2, Pencil, MoreHorizontal, Download } from '@lucide/svelte';
+	import { Trash2, Pencil, MoreHorizontal, Download, Loader2 } from '@lucide/svelte';
 	import { ActionDropdown } from '$lib/components/app';
-	import { downloadConversation } from '$lib/stores/chat.svelte';
+	import { downloadConversation, getAllLoadingConversations } from '$lib/stores/chat.svelte';
 	import { onMount } from 'svelte';
 
 	interface Props {
@@ -25,6 +25,9 @@
 	let renderActionsDropdown = $state(false);
 	let dropdownOpen = $state(false);
 
+	// Track loading state reactively by checking if conversation ID is in loading conversations array
+	let isLoading = $derived(getAllLoadingConversations().includes(conversation.id));
+
 	function handleEdit(event: Event) {
 		event.stopPropagation();
 		onEdit?.(conversation.id);
@@ -83,11 +86,16 @@
 	onmouseover={handleMouseOver}
 	onmouseleave={handleMouseLeave}
 >
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<span class="truncate text-sm font-medium" onclick={handleMobileSidebarItemClick}>
-		{conversation.name}
-	</span>
+	<div class="flex min-w-0 flex-1 items-center gap-2">
+		{#if isLoading}
+			<Loader2 class="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" />
+		{/if}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<span class="truncate text-sm font-medium" onclick={handleMobileSidebarItemClick}>
+			{conversation.name}
+		</span>
+	</div>
 
 	{#if renderActionsDropdown}
 		<div class="actions flex items-center">

tools/server/webui/src/lib/services/slots.ts

@@ -288,7 +288,7 @@ export class SlotsService {
 				return conversationState;
 			}
 		}
-		
+
 		// Fallback to global state
 		if (this.lastKnownState) {
 			return this.lastKnownState;

tools/server/webui/src/lib/stores/chat.svelte.ts

@@ -6,6 +6,7 @@ import { filterByLeafNodeId, findLeafNode, findDescendantMessages } from '$lib/u
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
 import { toast } from 'svelte-sonner';
+import { SvelteMap } from 'svelte/reactivity';
 import type { ExportedConversations } from '$lib/types/database';
 
 /**
@@ -51,10 +52,8 @@ class ChatStore {
 	isInitialized = $state(false);
 	isLoading = $state(false);
 	// Track loading and streaming state per conversation
-	conversationLoadingStates = $state<Map<string, boolean>>(new Map());
-	conversationStreamingStates = $state<Map<string, { response: string; messageId: string }>>(
-		new Map()
-	);
+	conversationLoadingStates = new SvelteMap<string, boolean>();
+	conversationStreamingStates = new SvelteMap<string, { response: string; messageId: string }>();
 	titleUpdateConfirmationCallback?: (currentTitle: string, newTitle: string) => Promise<boolean>;
 
 	constructor() {
@@ -471,7 +470,7 @@ class ChatStore {
 
 					// Update database with the message's conversation ID (not activeConversation which may have changed)
 					await DatabaseStore.updateCurrentNode(assistantMessage.convId, assistantMessage.id);
-					
+
 					// Only update activeConversation.currNode if this is still the active conversation
 					if (this.activeConversation?.id === assistantMessage.convId) {
 						this.activeConversation.currNode = assistantMessage.id;
@@ -631,7 +630,7 @@ class ChatStore {
 		}
 
 		this.errorDialogState = null;
-		
+
 		// Set loading state for this specific conversation
 		this.setConversationLoading(this.activeConversation.id, true);
 		this.clearConversationStreaming(this.activeConversation.id);
@@ -1284,12 +1283,12 @@ class ChatStore {
 	clearActiveConversation(): void {
 		this.activeConversation = null;
 		this.activeMessages = [];
-		
+
 		// Clear global UI state since there's no active conversation
 		// Background streaming will continue but won't affect the UI
 		this.isLoading = false;
 		this.currentResponse = '';
-		
+
 		// Clear active conversation in slots service
 		slotsService.setActiveConversation(null);
 	}