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
+113 -35

No files matched your search

@@ -117,6 +117,11 @@ export const POST = withAdmin(
}); });
try { try {
// Coalesce micro-step progress events to at most one per
// ~120ms per item so large imports don't flood the client
// (terminal states are always emitted by importSingleFurni
// and sent below).
let lastProgressSent = 0;
const result: ImportSingleResult = await importSingleFurni({ const result: ImportSingleResult = await importSingleFurni({
id: item.id ?? 0, id: item.id ?? 0,
classname: item.classname, classname: item.classname,
@@ -131,6 +136,9 @@ export const POST = withAdmin(
nitroBaseUrl: source?.nitroBaseUrl, nitroBaseUrl: source?.nitroBaseUrl,
iconBaseUrl: source?.iconBaseUrl, iconBaseUrl: source?.iconBaseUrl,
onProgress: (status: string) => { onProgress: (status: string) => {
const now = Date.now();
if (now - lastProgressSent < 120) return;
lastProgressSent = now;
send({ send({
type: "item_progress", type: "item_progress",
classname: item.classname, classname: item.classname,
+13 -2
View File
@@ -73,7 +73,13 @@ export const BatchProgress = memo(function BatchProgress({
return () => clearInterval(id); return () => clearInterval(id);
}, [done]); }, [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( const completed = useMemo(
() => () =>
entries.filter((i) => i.status === "done" || i.status === "failed") entries.filter((i) => i.status === "done" || i.status === "failed")
@@ -239,7 +245,12 @@ export const BatchProgress = memo(function BatchProgress({
View item details ({total}) View item details ({total})
</summary> </summary>
<div className="mt-2 max-h-44 space-y-2 overflow-auto"> <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 <div
key={item.classname} key={item.classname}
className="flex items-start gap-2 rounded-md bg-[var(--admin-canvas)] p-2 text-xs" className="flex items-start gap-2 rounded-md bg-[var(--admin-canvas)] p-2 text-xs"
File diff suppressed because it is too large. Load diff
+16 -3
View File
@@ -79,9 +79,22 @@ export function runSseBatch<T>(opts: RunSseBatchOptions<T>): Response {
index, index,
}); });
try { try {
const result = await worker(item, index, (status) => // Coalesce micro-step progress ('downloading', 'converting',
send({ type: "item_progress", classname, status, index }), // ...) to at most one per 120ms per item so large imports
); // don't flood the client. Terminal states are emitted
// separately below.
let lastReportSent = 0;
const result = await worker(item, index, (status) => {
const now = Date.now();
if (now - lastReportSent < 120) return;
lastReportSent = now;
send({
type: "item_progress",
classname,
status,
index,
});
});
if (ac.signal.aborted) return; if (ac.signal.aborted) return;
if (result.ok) { if (result.ok) {
succeeded++; succeeded++;