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
@@ -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,
|
||||||
|
|||||||
@@ -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
@@ -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++;
|
||||||
|
|||||||
Reference in new issue
Block a user