mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-02-13 19:55:45 +01:00
Kaj Kowalski
cd05fc8648
- Fix syntax errors in skills markdown files (.github/skills, .opencode/skills) - Change typescript to tsx for code blocks with JSX - Replace ellipsis (...) in array examples with valid syntax - Separate CSS from TypeScript into distinct code blocks - Convert JavaScript object examples to valid JSON in docs - Fix enum definitions with proper comma separation
818 B
818 B
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| CSS content-visibility for Long Lists | HIGH | faster initial render | rendering, css, content-visibility, long-lists |
CSS content-visibility for Long Lists
Apply content-visibility: auto to defer off-screen rendering.
CSS:
.message-item {
content-visibility: auto;
contain-intrinsic-size: 0 80px;
}
Example:
function MessageList({ messages }: { messages: Message[] }) {
return (
<div className="overflow-y-auto h-screen">
{messages.map((msg) => (
<div key={msg.id} className="message-item">
<Avatar user={msg.author} />
<div>{msg.content}</div>
</div>
))}
</div>
);
}
For 1000 messages, browser skips layout/paint for ~990 off-screen items (10× faster initial render).