perf(studio): virtualize the furniture table and throttle batch progress
CI / check (push) Successful in 2m33s
CI / deploy (push) Successful in 1m28s
CI / publish-container (push) Successful in 57s

- Render the table view through a virtualizer too, using a shared grid
  template so the sticky header and rows keep perfect column alignment
- Keep semantic table/row/cell elements while virtualizing
- Cap the batch item-details list to the latest 60 rows (newest first)
- Coalesce per-item progress events server-side (120ms throttle) in both
  the exact-import and clone SSE batch runners
This commit is contained in:
openhands committed 2026-09-13 11:53:07 +02:00
1 parent d02aaa0d87
commit b92f897ba2
4 files changed
+284 -206

No files matched your search

+13 -2
View File
@@ -73,7 +73,13 @@ export const BatchProgress = memo(function BatchProgress({
return () => clearInterval(id);
}, [done]);
const entries = useMemo(() => [...progress.values()], [progress]);
// Relevance-first list: newest activity on top, capped so high-volume
// imports don't render hundreds of DOM rows on every progress event.
const VISIBLE_ITEMS = 60;
const entries = useMemo(
() => [...progress.values()].slice().reverse(),
[progress],
);
const completed = useMemo(
() =>
entries.filter((i) => i.status === "done" || i.status === "failed")
@@ -239,7 +245,12 @@ export const BatchProgress = memo(function BatchProgress({
View item details ({total})
</summary>
<div className="mt-2 max-h-44 space-y-2 overflow-auto">
{entries.map((item) => (
{entries.length > VISIBLE_ITEMS && (
<p className="px-1 text-[0.65rem] text-[var(--admin-text-muted)]">
Showing {VISIBLE_ITEMS} of {entries.length} items
</p>
)}
{entries.slice(0, VISIBLE_ITEMS).map((item) => (
<div
key={item.classname}
className="flex items-start gap-2 rounded-md bg-[var(--admin-canvas)] p-2 text-xs"