From c1804173294c6754b9a976c5e8118c89a1a3709e Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 14 May 2026 23:28:41 +0530
Subject: [PATCH] refactor: enhance loading and sidebar components with
 improved skeleton loading states and styling

---
 .../[search_space_id]/new-chat/loading.tsx    | 85 +++++++++++--------
 .../components/layout/ui/sidebar/Sidebar.tsx  | 41 ++++-----
 2 files changed, 72 insertions(+), 54 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx
index 6eb9223ca..e18100e6a 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx
@@ -2,42 +2,59 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
 	return (
-		<div className="flex h-full flex-col bg-main-panel px-4">
-			<div className="mx-auto w-full max-w-[44rem] flex flex-1 flex-col gap-6 py-8">
-				{/* User message */}
-				<div className="flex justify-end">
-					<Skeleton className="h-12 w-56 rounded-2xl" />
+		<div
+			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-main-panel"
+			style={{
+				["--thread-max-width" as string]: "44rem",
+			}}
+		>
+			<div
+				className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 scroll-smooth"
+				style={{ scrollbarGutter: "stable" }}
+			>
+				<div
+					aria-hidden
+					className="aui-chat-viewport-top-fade pointer-events-none sticky top-0 z-10 -mx-4 h-2 shrink-0 bg-gradient-to-b from-main-panel from-20% to-transparent"
+				/>
+				<div className="mx-auto w-full max-w-(--thread-max-width) flex flex-1 flex-col gap-6 py-8">
+					{/* User message */}
+					<div className="flex justify-end">
+						<Skeleton className="h-12 w-56 rounded-2xl" />
+					</div>
+
+					{/* Assistant message */}
+					<div className="flex flex-col gap-2">
+						<Skeleton className="h-4 w-full" />
+						<Skeleton className="h-4 w-[85%]" />
+						<Skeleton className="h-18 w-[40%]" />
+					</div>
+
+					{/* User message */}
+					<div className="flex gap-2 justify-end">
+						<Skeleton className="h-12 w-72 rounded-2xl" />
+					</div>
+
+					{/* Assistant message */}
+					<div className="flex flex-col gap-2">
+						<Skeleton className="h-10 w-[30%]" />
+						<Skeleton className="h-4 w-[90%]" />
+						<Skeleton className="h-6 w-[60%]" />
+					</div>
+
+					{/* User message */}
+					<div className="flex gap-2 justify-end">
+						<Skeleton className="h-12 w-96 rounded-2xl" />
+					</div>
 				</div>
 
-				{/* Assistant message */}
-				<div className="flex flex-col gap-2">
-					<Skeleton className="h-4 w-full" />
-					<Skeleton className="h-4 w-[85%]" />
-					<Skeleton className="h-18 w-[40%]" />
-				</div>
-
-				{/* User message */}
-				<div className="flex gap-2 justify-end">
-					<Skeleton className="h-12 w-72 rounded-2xl" />
-				</div>
-
-				{/* Assistant message */}
-				<div className="flex flex-col gap-2">
-					<Skeleton className="h-10 w-[30%]" />
-					<Skeleton className="h-4 w-[90%]" />
-					<Skeleton className="h-6 w-[60%]" />
-				</div>
-
-				{/* User message */}
-				<div className="flex gap-2 justify-end">
-					<Skeleton className="h-12 w-96 rounded-2xl" />
-				</div>
-			</div>
-
-			{/* Input bar */}
-			<div className="sticky bottom-0 pb-6 bg-main-panel">
-				<div className="mx-auto w-full max-w-[44rem]">
-					<Skeleton className="h-24 w-full rounded-2xl" />
+				{/* Input bar */}
+				<div
+					className="aui-chat-composer-footer sticky bottom-0 z-20 -mx-4 mt-auto flex flex-col items-stretch bg-gradient-to-t from-main-panel from-60% to-transparent px-4 pt-6"
+					style={{ paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" }}
+				>
+					<div className="aui-chat-composer-area relative mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-3 overflow-visible">
+						<Skeleton className="h-28 w-full rounded-3xl" />
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
index 7cc65d2b8..a55909ab2 100644
--- a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
@@ -23,11 +23,24 @@ import { SidebarHeader } from "./SidebarHeader";
 import { SidebarSection } from "./SidebarSection";
 import { SidebarUserProfile } from "./SidebarUserProfile";
 
-function ChatListItemSkeleton() {
+const CHAT_LIST_SKELETON_WIDTHS = ["w-[78%]", "w-[64%]", "w-[86%]", "w-[58%]", "w-[72%]"];
+
+function ChatListItemSkeleton({ widthClass }: { widthClass: string }) {
 	return (
-		<div className="flex w-full items-center gap-2 rounded-md p-2">
-			<Skeleton className="h-4 w-4 shrink-0 rounded" />
-			<Skeleton className="h-4 w-full max-w-[180px]" />
+		<div className="group/item relative w-full">
+			<div className="flex h-[32px] w-full items-center rounded-md px-2 py-1.5">
+				<Skeleton className={cn("h-4 rounded", widthClass)} />
+			</div>
+		</div>
+	);
+}
+
+function ChatListSkeletonRows() {
+	return (
+		<div className="flex flex-col gap-0.5">
+			{CHAT_LIST_SKELETON_WIDTHS.map((widthClass) => (
+				<ChatListItemSkeleton key={widthClass} widthClass={widthClass} />
+			))}
 		</div>
 	);
 }
@@ -217,13 +230,7 @@ export function Sidebar({
 						}
 					>
 						{isLoadingChats ? (
-							<div className="flex flex-col gap-0.5">
-								<ChatListItemSkeleton />
-								<ChatListItemSkeleton />
-								<ChatListItemSkeleton />
-								<ChatListItemSkeleton />
-								<ChatListItemSkeleton />
-							</div>
+							<ChatListSkeletonRows />
 						) : sharedChats.length > 0 ? (
 							<div className="relative min-h-0 flex-1">
 								<div
@@ -250,7 +257,7 @@ export function Sidebar({
 								)}
 							</div>
 						) : (
-							<p className="px-2 py-1 text-sm text-muted-foreground">{t("no_shared_chats")}</p>
+							<p className="px-2 py-1 text-sm text-muted-foreground/60">{t("no_shared_chats")}</p>
 						)}
 					</SidebarSection>
 
@@ -274,13 +281,7 @@ export function Sidebar({
 						}
 					>
 						{isLoadingChats ? (
-							<div className="flex flex-col gap-0.5">
-								<ChatListItemSkeleton />
-								<ChatListItemSkeleton />
-								<ChatListItemSkeleton />
-								<ChatListItemSkeleton />
-								<ChatListItemSkeleton />
-							</div>
+							<ChatListSkeletonRows />
 						) : chats.length > 0 ? (
 							<div className="relative flex-1 min-h-0">
 								<div
@@ -307,7 +308,7 @@ export function Sidebar({
 								)}
 							</div>
 						) : (
-							<p className="px-2 py-1 text-sm text-muted-foreground">{t("no_chats")}</p>
+							<p className="px-2 py-1 text-sm text-muted-foreground/60">{t("no_chats")}</p>
 						)}
 					</SidebarSection>
 				</div>