apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-09 15:52:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

4
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
View file

@ -630,7 +630,7 @@ export function DocumentsTableShell({
return ( return (
<tr <tr
key={doc.id} 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" isMentioned ? "bg-primary/5 hover:bg-primary/8" : "hover:bg-muted/30"
} ${canInteract && hasChatMode ? "cursor-pointer" : ""}`} } ${canInteract && hasChatMode ? "cursor-pointer" : ""}`}
onClick={handleRowClick} onClick={handleRowClick}
@ -871,7 +871,7 @@ export function DocumentsTableShell({
return ( return (
<MobileCardWrapper key={doc.id} onLongPress={() => setMobileActionDoc(doc)}> <MobileCardWrapper key={doc.id} onLongPress={() => setMobileActionDoc(doc)}>
<div <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" isMentioned ? "bg-primary/5" : "hover:bg-muted/20"
} ${canInteract && hasChatMode ? "cursor-pointer" : ""}`} } ${canInteract && hasChatMode ? "cursor-pointer" : ""}`}
> >

11
surfsense_web/app/globals.css
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/@llamaindex/chat-ui/**/*.{ts,tsx}";
@source "../node_modules/streamdown/dist/*.js"; @source "../node_modules/streamdown/dist/*.js";
@source "../node_modules/@streamdown/code/dist/*.js"; @source "../node_modules/@streamdown/code/dist/*.js";

2
surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
View file

@ -349,7 +349,7 @@ export function AllPrivateChatsSidebarContent({
<div <div
key={thread.id} key={thread.id}
className={cn( 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", "hover:bg-accent hover:text-accent-foreground",
"transition-colors cursor-pointer", "transition-colors cursor-pointer",
isActive && "bg-accent text-accent-foreground", isActive && "bg-accent text-accent-foreground",

2
surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
View file

@ -349,7 +349,7 @@ export function AllSharedChatsSidebarContent({
<div <div
key={thread.id} key={thread.id}
className={cn( 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", "hover:bg-accent hover:text-accent-foreground",
"transition-colors cursor-pointer", "transition-colors cursor-pointer",
isActive && "bg-accent text-accent-foreground", isActive && "bg-accent text-accent-foreground",

1
surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
View file

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