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 <tr> 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 (
 										<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" : ""}`}
 								>
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({
 								<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",
diff --git a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
index b2ba86673..4a59df440 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
@@ -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",
diff --git a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
index 61eda2a88..72400a589 100644
--- a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
@@ -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