Nicholai
75168f7678
structure: state/CURRENT.md — 2-4 line session state (rewritten each session) events/ — json event bus (pull-based, optional context) persistent/ — important decisions (one doc per decision) emit — helper script for emitting events
815 B
815 B
| 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).