apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-26 23:51:14 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(sidebar): add loading skeleton for threads in AllChatsSidebar component

Browse source
This commit is contained in:
Anish Sarkar 2026-07-15 20:11:41 +05:30
parent 3740171a5c
commit 7889babb8e
1 changed files with 23 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

26
surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx
View file

@ -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">