perf(studio): virtualize the furniture table and throttle batch progress
- 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:
1 parent
d02aaa0d87
commit
b92f897ba2
4 files changed
+284
-206
No files matched your search
@@ -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"
|
||||
|
||||
Reference in new issue
Block a user