Rendering comparison
Skeleton loading and virtual scrolling
The same app list rendered two ways at once. The left column puts every record in the DOM. The right column keeps only the rows near the viewport and recycles them as you scroll. Node counts below are live.
0Records in the list
0Rows currently mounted
48First paint batch
300pxUniform card height
How to read this
- Progressive render renders a first batch immediately, then appends 48 more as you scroll. Simple, and the DOM grows to the full list.
- Virtual scroll keeps roughly two screens of rows mounted and repositions them on scroll. The DOM node count stays flat no matter how long the list is.
- Both start with skeleton cards so the loading state is visible instead of a blank panel.
- Uniform card height is the trade-off virtualisation requires. Cards are clamped to 320px and long summaries are limited to three lines.