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)
This commit is contained in:
SohamBhattacharjee2003 2026-04-02 02:26:55 +05:30
parent 5bfeda62f2
commit ae3b69443f
5 changed files with 16 additions and 4 deletions

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",