From 7889babb8e8743b7938f8eb60cef1ee9a944c345 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 15 Jul 2026 20:11:41 +0530
Subject: [PATCH] feat(sidebar): add loading skeleton for threads in
 AllChatsSidebar component

---
 .../layout/ui/sidebar/AllChatsSidebar.tsx     | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx
index 3063a9c50..04780bf3e 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx
@@ -94,7 +94,9 @@ function AllChatsContent({ workspaceId, className }: AllChatsContentProps) {
 	const {
 		data: threadsData,
 		error: threadsError,
+		isFetching: isFetchingThreads,
 		isLoading: isLoadingThreads,
+		isPlaceholderData,
 	} = useQuery({
 		queryKey: ["all-threads", workspaceId],
 		queryFn: () => fetchThreads(Number(workspaceId)),
@@ -228,6 +230,7 @@ function AllChatsContent({ workspaceId, className }: AllChatsContentProps) {
 	}, []);
 
 	const isLoading = isSearchMode ? isLoadingSearch : isLoadingThreads;
+	const isLoadingMoreThreads = !isSearchMode && isFetchingThreads && isPlaceholderData;
 	const error = isSearchMode ? searchError : threadsError;
 
 	const selectedFilterLabel = showArchived ? "Archived" : "Active";
@@ -307,10 +310,12 @@ function AllChatsContent({ workspaceId, className }: AllChatsContentProps) {
 						{[75, 90, 55, 80, 65, 85].map((titleWidth) => (
 							<div
 								key={`skeleton-${titleWidth}`}
-								className="flex items-center gap-2.5 rounded-md px-3 py-2.5"
+								className="rounded-md px-3 py-1.5 md:py-2"
 							>
-								<Skeleton className="h-4 w-4 shrink-0 rounded" />
-								<Skeleton className="h-5 rounded" style={{ width: `${titleWidth}%` }} />
+								<Skeleton
+									className="h-4 rounded md:h-4.5"
+									style={{ width: `${titleWidth}%` }}
+								/>
 							</div>
 						))}
 					</div>
@@ -485,6 +490,21 @@ function AllChatsContent({ workspaceId, className }: AllChatsContentProps) {
 								</div>
 							);
 						})}
+						{isLoadingMoreThreads ? (
+							<div className="mt-1 space-y-1">
+								{[62, 48, 56].map((titleWidth) => (
+									<div
+										key={`tail-skeleton-${titleWidth}`}
+										className="rounded-md px-3 py-1.5 md:py-2"
+									>
+										<Skeleton
+											className="h-4 rounded md:h-4.5"
+											style={{ width: `${titleWidth}%` }}
+										/>
+									</div>
+								))}
+							</div>
+						) : null}
 					</div>
 				) : isSearchMode ? (
 					<div className="text-center py-8">