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

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