From ae3b69443ff4b7422e66686c746dbe92d700d7a2 Mon Sep 17 00:00:00 2001 From: SohamBhattacharjee2003 <125297948+SohamBhattacharjee2003@users.noreply.github.com> Date: Thu, 2 Apr 2026 02:26:55 +0530 Subject: [PATCH] perf: add content-visibility: auto to long list items Apply content-visibility: auto to off-screen list and sidebar items to skip browser layout and painting until they scroll into view. Changes: - globals.css: add .list-item-lazy (48px) and .sidebar-item-lazy (40px) utilities - DocumentsTableShell: apply list-item-lazy to desktop rows and mobile card divs - AllPrivateChatsSidebar: apply sidebar-item-lazy to thread items - AllSharedChatsSidebar: apply sidebar-item-lazy to thread items - InboxSidebar: apply content-visibility inline (80px intrinsic height) to inbox items Implements Vercel React Best Practices Rule: rendering-content-visibility (6.2) --- .../(manage)/components/DocumentsTableShell.tsx | 4 ++-- surfsense_web/app/globals.css | 11 +++++++++++ .../layout/ui/sidebar/AllPrivateChatsSidebar.tsx | 2 +- .../layout/ui/sidebar/AllSharedChatsSidebar.tsx | 2 +- .../components/layout/ui/sidebar/InboxSidebar.tsx | 1 + 5 files changed, 16 insertions(+), 4 deletions(-) diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx index 92ced6e47..4e0c36267 100644 --- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx +++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx @@ -630,7 +630,7 @@ export function DocumentsTableShell({ return ( setMobileActionDoc(doc)}>
diff --git a/surfsense_web/app/globals.css b/surfsense_web/app/globals.css index 087c5b676..a37ddb8f3 100644 --- a/surfsense_web/app/globals.css +++ b/surfsense_web/app/globals.css @@ -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"; diff --git a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx index 1bc773374..57c011f01 100644 --- a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx +++ b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx @@ -349,7 +349,7 @@ export function AllPrivateChatsSidebarContent({
{isMobile ? (