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

@ -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