Merge pull request #1077 from SohamBhattacharjee2003/perf/content-visibility-auto-lists

perf: content visibility auto lists
This commit is contained in:
Rohan Verma 2026-04-01 22:18:23 -07:00 committed by GitHub
commit 23a8248c5e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 16 additions and 4 deletions

View file

@ -630,7 +630,7 @@ export function DocumentsTableShell({
return (
<tr
key={doc.id}
className={`group border-b border-border/50 transition-colors ${
className={`list-item-lazy group border-b border-border/50 transition-colors ${
isMentioned ? "bg-primary/5 hover:bg-primary/8" : "hover:bg-muted/30"
} ${canInteract && hasChatMode ? "cursor-pointer" : ""}`}
onClick={handleRowClick}
@ -871,7 +871,7 @@ export function DocumentsTableShell({
return (
<MobileCardWrapper key={doc.id} onLongPress={() => setMobileActionDoc(doc)}>
<div
className={`relative px-3 py-2 transition-colors ${
className={`list-item-lazy relative px-3 py-2 transition-colors ${
isMentioned ? "bg-primary/5" : "hover:bg-muted/20"
} ${canInteract && hasChatMode ? "cursor-pointer" : ""}`}
>

View file

@ -246,6 +246,17 @@ button {
}
}
/* content-visibility utilities — skip layout/paint for off-screen list items */
.list-item-lazy {
content-visibility: auto;
contain-intrinsic-size: 0 48px;
}
.sidebar-item-lazy {
content-visibility: auto;
contain-intrinsic-size: 0 40px;
}
@source "../node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}";
@source "../node_modules/streamdown/dist/*.js";
@source "../node_modules/@streamdown/code/dist/*.js";

View file

@ -349,7 +349,7 @@ export function AllPrivateChatsSidebarContent({
<div
key={thread.id}
className={cn(
"group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
"sidebar-item-lazy group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
"hover:bg-accent hover:text-accent-foreground",
"transition-colors cursor-pointer",
isActive && "bg-accent text-accent-foreground",

View file

@ -349,7 +349,7 @@ export function AllSharedChatsSidebarContent({
<div
key={thread.id}
className={cn(
"group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
"sidebar-item-lazy group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
"hover:bg-accent hover:text-accent-foreground",
"transition-colors cursor-pointer",
isActive && "bg-accent text-accent-foreground",

View file

@ -919,6 +919,7 @@ export function InboxSidebarContent({
"transition-colors cursor-pointer",
isMarkingAsRead && "opacity-50 pointer-events-none"
)}
style={{ contentVisibility: "auto", containIntrinsicSize: "0 80px" }}
>
{isMobile ? (
<button