remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/api/admin/import/furni/batch/route.ts
+8
View File
@@ -117,6 +117,11 @@ export const POST = withAdmin(
});
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({
id: item.id ?? 0,
classname: item.classname,
@@ -131,6 +136,9 @@ export const POST = withAdmin(
nitroBaseUrl: source?.nitroBaseUrl,
iconBaseUrl: source?.iconBaseUrl,
onProgress: (status: string) => {
const now = Date.now();
if (now - lastProgressSent < 120) return;
lastProgressSent = now;
send({
type: "item_progress",
classname: item.classname,
src/components/admin/studio/batch-progress.tsx
+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"
src/components/admin/studio/studio-client.tsx
+76 -30
View File
@@ -107,6 +107,12 @@ const GRID_CARD_W = 150;
const GRID_GAP = 12;
const GRID_ROW_H = 176;
// Table layout: a shared grid template keeps the sticky header and each
// virtualized row in perfect column alignment.
const TABLE_COLS =
"36px 48px minmax(0,1.4fr) minmax(0,1fr) minmax(0,0.6fr) minmax(0,0.7fr) minmax(0,1fr) 112px";
const TABLE_ROW_H = 40;
export function StudioClient({
source,
initialTree,
@@ -304,6 +310,12 @@ export function StudioClient({
estimateSize: () => GRID_ROW_H,
overscan: 5,
});
const tableVirtualizer = useVirtualizer({
count: viewMode === "list" ? filteredItems.length : 0,
getScrollElement: () => listRef.current,
estimateSize: () => TABLE_ROW_H,
overscan: 8,
});
// Infinite scroll: auto-load the next page when the sentinel enters view.
const sentinelRef = useRef<HTMLDivElement | null>(null);
@@ -1855,11 +1867,17 @@ export function StudioClient({
})}
</div>
) : (
<div className="overflow-x-auto rounded-lg border border-[var(--admin-border)]">
<table className="w-full min-w-[660px] text-sm">
<thead className="sticky top-0 z-10 bg-[var(--admin-surface)]">
<tr>
<th className="w-9 px-2 py-2 text-left">
<table
aria-label="Furniture results"
className="w-full text-sm"
style={{ borderCollapse: "separate" }}
>
<thead>
<tr
className="sticky top-0 z-10 grid w-full min-w-[660px] border-b border-[var(--admin-border)] bg-[var(--admin-surface)]"
style={{ gridTemplateColumns: TABLE_COLS }}
>
<th scope="col" className="px-2 py-2 text-left">
<Checkbox
style={{
display: "inline-flex",
@@ -1872,40 +1890,72 @@ export function StudioClient({
aria-label="Select all"
/>
</th>
<th className="w-12 px-1 py-2" />
<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
<th scope="col" className="px-1 py-2" />
<th
scope="col"
className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
>
Name
</th>
<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
<th
scope="col"
className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
>
Classname
</th>
<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
<th
scope="col"
className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
>
Type
</th>
<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
<th
scope="col"
className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
>
Category
</th>
<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
<th
scope="col"
className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
>
Status
</th>
<th className="w-28 px-2 py-2 text-right font-semibold text-[var(--admin-text-muted)]">
<th
scope="col"
className="px-2 py-2 text-right font-semibold text-[var(--admin-text-muted)]"
>
Actions
</th>
</tr>
</thead>
<tbody>
{filteredItems.map((item) => {
<tbody
className="relative w-full"
style={{
display: "block",
height: `${tableVirtualizer.getTotalSize()}px`,
}}
>
{tableVirtualizer.getVirtualItems().map((vi) => {
const item = filteredItems[vi.index];
const isSel = selected.has(item.classname);
return (
<tr
key={item.classname}
key={vi.key}
data-index={vi.index}
ref={tableVirtualizer.measureElement}
aria-selected={isSel}
className={cn(
"border-t border-[var(--admin-border)] transition-colors hover:bg-[var(--admin-accent)]/5",
"absolute left-0 top-0 grid w-full min-w-[660px] text-sm transition-colors hover:bg-[var(--admin-accent)]/5",
isSel && "bg-[var(--admin-accent)]/10",
)}
style={{
display: "grid",
transform: `translateY(${vi.start}px)`,
gridTemplateColumns: TABLE_COLS,
}}
>
<td className="px-2 py-1.5">
<td className="border-t border-[var(--admin-border)] px-2 py-1.5">
<Checkbox
style={{
display: "inline-flex",
@@ -1920,7 +1970,7 @@ export function StudioClient({
aria-label={`Select ${item.classname}`}
/>
</td>
<td className="px-1 py-1.5">
<td className="border-t border-[var(--admin-border)] px-1 py-1.5">
<button
type="button"
onClick={() => openDetail(item)}
@@ -1937,19 +1987,19 @@ export function StudioClient({
/>
</button>
</td>
<td className="max-w-[220px] truncate px-2 py-1.5 font-medium text-[var(--admin-text)]">
<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 font-medium text-[var(--admin-text)]">
{item.name}
</td>
<td className="max-w-[180px] truncate px-2 py-1.5 font-mono text-[0.7rem] text-[var(--admin-text-muted)]">
<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 font-mono text-[0.7rem] text-[var(--admin-text-muted)]">
{item.classname}
</td>
<td className="px-2 py-1.5 text-[var(--admin-text-muted)]">
<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 text-[var(--admin-text-muted)]">
{TYPE_LABELS[item.type] ?? item.type}
</td>
<td className="max-w-[140px] truncate px-2 py-1.5 text-[var(--admin-text-muted)]">
<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 text-[var(--admin-text-muted)]">
{item.category || "—"}
</td>
<td className="px-2 py-1.5">
<td className="border-t border-[var(--admin-border)] px-2 py-1.5">
{item.alreadyImported ? (
<div className="flex flex-wrap gap-0.5">
{!item.nitroExists && (
@@ -1993,7 +2043,7 @@ export function StudioClient({
</Badge>
)}
</td>
<td className="px-2 py-1.5">
<td className="border-t border-[var(--admin-border)] px-2 py-1.5">
<div className="flex items-center justify-end gap-1">
{!item.alreadyImported && (
<button
@@ -2030,8 +2080,7 @@ export function StudioClient({
<Pencil size={12} />
</button>
)}
{item.alreadyImported &&
!item.nitroExists && (
{item.alreadyImported && !item.nitroExists && (
<button
type="button"
onClick={() => regenNitro(item)}
@@ -2041,9 +2090,7 @@ export function StudioClient({
aria-label={`Regenerate nitro ${item.classname}`}
className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-warning)] transition-colors hover:bg-[var(--admin-warning)]/10 disabled:opacity-50"
>
{regeneratingNitro.has(
item.classname,
) ? (
{regeneratingNitro.has(item.classname) ? (
<Loader2
size={12}
className="animate-spin"
@@ -2060,7 +2107,6 @@ export function StudioClient({
})}
</tbody>
</table>
</div>
)}
<div
src/lib/services/import/core/sse-batch.ts
+16 -3
View File
@@ -79,9 +79,22 @@ export function runSseBatch<T>(opts: RunSseBatchOptions<T>): Response {
index,
});
try {
const result = await worker(item, index, (status) =>
send({ type: "item_progress", classname, status, index }),
);
// Coalesce micro-step progress ('downloading', 'converting',
// ...) 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 (result.ok) {
succeeded++;