Adopt row virtualization for any table over 500 rows
Make windowing the default pattern for large tables across the console.
Runs table freezes the tab at ~3,000 rows — make it stay smoothNeeds reviewkordra/node-4821$0.98 / $4.0024moderate
Runs table freezes the tab at ~3,000 rows — make it stay smooth
Design partners report the runs tab pins the CPU with thousands of rows. Keep it interactive without a heavyweight dependency if possible.
Slack · #eng-web · thread ↗Dispatched to fleet · Frontier · 3 workers, independent · cap $4.00 · runner mbp-maya.local
Kordra Fleet
buildnpm run buildpassed
testnpm test -- RunsTablepassed
Best-of-3
Ready for your review
Two viable approaches both compiled and kept the table working; there's no behavioral test that captures 'feels smooth', so the fleet couldn't pick on its own. An independent reviewer suggested Worker B (a dependency-free window) over Worker A (adds a virtualization library). Your call.
syntax gateFrontier$0.98 of $4.001 file · +12 −7Moderate
UI walkthroughrecorded on mbp-maya.local
auto-captured on the runner
Load the Runs tab with 3,000 rows → Scroll top-to-bottom fast → No freeze — only visible rows are mounted
The changekordra/node-4821
apps/console/src/components/RunsTable.tsx+12 −7
@@ -22,11 +22,18 @@ export function RunsTable({ rows }: { rows: Run[] }) {
22 return (
23 <tbody>
24 {rows.map((r) => (
25 <RunRow key={r.id} run={r} />
26 ))}
27 </tbody>
28 );
22 // Only render the rows in view (+ a small overscan) so 3k+ rows stay at 60fps
23 // instead of mounting every row on each scroll tick.
24 const { start, end, padTop, padBottom } = useWindow(rows.length, ROW_H, scrollTop, viewportH);
25 return (
26 <tbody>
27 <tr aria-hidden style={{ height: padTop }} />
28 {rows.slice(start, end).map((r) => (
29 <RunRow key={r.id} run={r} />
30 ))}
31 <tr aria-hidden style={{ height: padBottom }} />
32 </tbody>
33 );
2934}
3035
Tests
✓testspassed
npm run build && npm test -- RunsTableGroundinggrounded in 1 org decision
◐ memory
Thread: console tab pins CPU when a workspace has thousands of runs
Reported by two design-partners on the runs view.
Proposed for the brainthe run wants 1 decision remembered — your call
You are the gate. Approving pushes kordra/node-4821 and opens a PR — and ratifies 1 proposed decision. Never your default branch.