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

refactor: enhance loading and sidebar components with improved skeleton loading states and styling

Browse source
This commit is contained in:
Anish Sarkar 2026-05-14 23:28:41 +05:30
parent 2bdd59611a
commit c180417329
2 changed files with 72 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

85
surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx
View file

@ -2,42 +2,59 @@ import { Skeleton } from "@/components/ui/skeleton";
export default function Loading() { export default function Loading() {
return ( return (
<div className="flex h-full flex-col bg-main-panel px-4"> <div
<div className="mx-auto w-full max-w-[44rem] flex flex-1 flex-col gap-6 py-8"> className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-main-panel"
{/* User message */} style={{
<div className="flex justify-end"> ["--thread-max-width" as string]: "44rem",
<Skeleton className="h-12 w-56 rounded-2xl" /> }}
>
<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> </div>
{/* Assistant message */} {/* Input bar */}
<div className="flex flex-col gap-2"> <div
<Skeleton className="h-4 w-full" /> 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"
<Skeleton className="h-4 w-[85%]" /> style={{ paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" }}
<Skeleton className="h-18 w-[40%]" /> >
</div> <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" />
{/* User message */} </div>
<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" />
</div> </div>
</div> </div>
</div> </div>

41
surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
View file

@ -23,11 +23,24 @@ import { SidebarHeader } from "./SidebarHeader";
import { SidebarSection } from "./SidebarSection"; import { SidebarSection } from "./SidebarSection";
import { SidebarUserProfile } from "./SidebarUserProfile"; 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 ( return (
<div className="flex w-full items-center gap-2 rounded-md p-2"> <div className="group/item relative w-full">
<Skeleton className="h-4 w-4 shrink-0 rounded" /> <div className="flex h-[32px] w-full items-center rounded-md px-2 py-1.5">
<Skeleton className="h-4 w-full max-w-[180px]" /> <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> </div>
); );
} }
@ -217,13 +230,7 @@ export function Sidebar({
} }
> >
{isLoadingChats ? ( {isLoadingChats ? (
<div className="flex flex-col gap-0.5"> <ChatListSkeletonRows />
<ChatListItemSkeleton />
<ChatListItemSkeleton />
<ChatListItemSkeleton />
<ChatListItemSkeleton />
<ChatListItemSkeleton />
</div>
) : sharedChats.length > 0 ? ( ) : sharedChats.length > 0 ? (
<div className="relative min-h-0 flex-1"> <div className="relative min-h-0 flex-1">
<div <div
@ -250,7 +257,7 @@ export function Sidebar({
)} )}
</div> </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> </SidebarSection>
@ -274,13 +281,7 @@ export function Sidebar({
} }
> >
{isLoadingChats ? ( {isLoadingChats ? (
<div className="flex flex-col gap-0.5"> <ChatListSkeletonRows />
<ChatListItemSkeleton />
<ChatListItemSkeleton />
<ChatListItemSkeleton />
<ChatListItemSkeleton />
<ChatListItemSkeleton />
</div>
) : chats.length > 0 ? ( ) : chats.length > 0 ? (
<div className="relative flex-1 min-h-0"> <div className="relative flex-1 min-h-0">
<div <div
@ -307,7 +308,7 @@ export function Sidebar({
)} )}
</div> </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> </SidebarSection>
</div> </div>