perf(studio): cache furni imports and virtualize the furniture grid
- Add TTL-based caching for local index lookup, furnidata classnames, catalog id set, nitro file presence and import stats - Invalidate caches after furnace single/batch/clone imports - Rewrite batch progress with elapsed time, rate and verification chips - Virtualize the grid with @tanstack/react-virtual and replace the Load more button with infinite scroll via an IntersectionObserver
This commit is contained in:
openhands committed
1 parent
2920669362
commit
d02aaa0d87
6 files changed
+672
-345
No files matched your search
@@ -1,11 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
import {
|
||||
ArrowDown,
|
||||
ArrowUpDown,
|
||||
Check,
|
||||
CircleAlert,
|
||||
CloudDownload,
|
||||
Download,
|
||||
Globe,
|
||||
Languages,
|
||||
Layers,
|
||||
@@ -101,6 +102,11 @@ const ImportReview = lazy(() =>
|
||||
})),
|
||||
);
|
||||
|
||||
// Grid virtualization geometry (px) — matches the grid-card markup below.
|
||||
const GRID_CARD_W = 150;
|
||||
const GRID_GAP = 12;
|
||||
const GRID_ROW_H = 176;
|
||||
|
||||
export function StudioClient({
|
||||
source,
|
||||
initialTree,
|
||||
@@ -269,6 +275,39 @@ export function StudioClient({
|
||||
[filteredItems, selected],
|
||||
);
|
||||
|
||||
const hasMorePages = meta ? meta.currentPage < meta.lastPage : false;
|
||||
|
||||
// ── Grid virtualization ─────────────────────────────────────────
|
||||
const [gridCols, setGridCols] = useState(1);
|
||||
useEffect(() => {
|
||||
const el = listRef.current;
|
||||
if (viewMode !== "grid" || !el) return;
|
||||
const update = () => {
|
||||
const width = Math.max(el.clientWidth - 24, 100);
|
||||
const cols = Math.max(
|
||||
1,
|
||||
Math.floor((width + GRID_GAP) / (GRID_CARD_W + GRID_GAP)),
|
||||
);
|
||||
setGridCols((previous) => (previous === cols ? previous : cols));
|
||||
};
|
||||
update();
|
||||
const observer = new ResizeObserver(update);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, [viewMode]);
|
||||
|
||||
const gridRowCount =
|
||||
viewMode === "grid" ? Math.ceil(filteredItems.length / gridCols) : 0;
|
||||
const gridVirtualizer = useVirtualizer({
|
||||
count: gridRowCount,
|
||||
getScrollElement: () => listRef.current,
|
||||
estimateSize: () => GRID_ROW_H,
|
||||
overscan: 5,
|
||||
});
|
||||
|
||||
// Infinite scroll: auto-load the next page when the sentinel enters view.
|
||||
const sentinelRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const fetchStats = useCallback(async () => {
|
||||
try {
|
||||
const res = await adminFetch("/api/admin/import/furni?action=stats");
|
||||
@@ -335,6 +374,39 @@ export function StudioClient({
|
||||
[],
|
||||
);
|
||||
|
||||
// Infinite scroll: auto-load the next page when the sentinel enters view.
|
||||
useEffect(() => {
|
||||
const el = sentinelRef.current;
|
||||
if (!el || !hasMorePages) return;
|
||||
let cancelled = false;
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (cancelled) return;
|
||||
if (
|
||||
entries.some((e) => e.isIntersecting) &&
|
||||
!loading &&
|
||||
!batchProgress
|
||||
) {
|
||||
fetchItems(activeSearch, (meta?.currentPage ?? 1) + 1, activeSource);
|
||||
}
|
||||
},
|
||||
{ root: listRef.current, rootMargin: "700px 0px" },
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [
|
||||
hasMorePages,
|
||||
meta?.currentPage,
|
||||
loading,
|
||||
batchProgress,
|
||||
activeSearch,
|
||||
activeSource,
|
||||
fetchItems,
|
||||
]);
|
||||
|
||||
const changeSource = (sourceId: string) => {
|
||||
sourceGeneration.current += 1;
|
||||
setConfirmDelete(false);
|
||||
@@ -1631,118 +1703,153 @@ export function StudioClient({
|
||||
) : (
|
||||
<>
|
||||
{viewMode === "grid" ? (
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-3">
|
||||
{filteredItems.map((item) => {
|
||||
const isSel = selected.has(item.classname);
|
||||
<div
|
||||
className="relative w-full"
|
||||
style={{ height: `${gridVirtualizer.getTotalSize()}px` }}
|
||||
>
|
||||
{gridVirtualizer.getVirtualItems().map((vi) => {
|
||||
const start = vi.index * gridCols;
|
||||
const rowItems = filteredItems.slice(
|
||||
start,
|
||||
start + gridCols,
|
||||
);
|
||||
return (
|
||||
<div key={item.classname} className="group relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openDetail(item)}
|
||||
className={cn(
|
||||
"flex w-full flex-col overflow-hidden rounded-xl border text-left transition-all outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
|
||||
isSel
|
||||
? "border-[var(--admin-accent)] bg-[var(--admin-accent)]/10"
|
||||
: "border-[var(--admin-border)] bg-[var(--admin-surface)] hover:-translate-y-0.5 hover:border-[var(--admin-accent)]/60 hover:shadow-lg hover:shadow-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="relative flex h-24 items-center justify-center overflow-hidden"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--admin-text-muted) 14%, transparent) 1px, transparent 0)",
|
||||
backgroundSize: "14px 14px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={getFurniImageUrl(item)}
|
||||
alt={item.name}
|
||||
className="h-14 w-14 object-contain transition-transform group-hover:scale-110"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
loading="lazy"
|
||||
onError={(e) => handleImgError(e, item)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-start justify-between gap-1 border-t border-[var(--admin-border)] px-2 py-1.5">
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-xs font-semibold text-[var(--admin-text)]">
|
||||
{item.name}
|
||||
</p>
|
||||
<p className="truncate font-mono text-[0.6rem] text-[var(--admin-text-muted)]">
|
||||
{item.classname}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 px-2 pb-1.5">
|
||||
<Badge className="h-4 bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]">
|
||||
{TYPE_LABELS[item.type] ?? item.type}
|
||||
</Badge>
|
||||
{item.alreadyImported ? (
|
||||
<>
|
||||
{!item.nitroExists && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
|
||||
>
|
||||
No nitro
|
||||
</Badge>
|
||||
)}
|
||||
{item.hasFurnidata === false && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
|
||||
>
|
||||
No furnidata
|
||||
</Badge>
|
||||
)}
|
||||
{item.hasCatalogEntry === false && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
|
||||
>
|
||||
No catalog
|
||||
</Badge>
|
||||
)}
|
||||
{item.nitroExists &&
|
||||
item.hasFurnidata !== false &&
|
||||
item.hasCatalogEntry !== false && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[var(--admin-success)] border-[var(--admin-success)]/40"
|
||||
>
|
||||
Imported
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Badge className="h-4 bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]">
|
||||
New
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleSelect(item.classname);
|
||||
<div
|
||||
key={vi.key}
|
||||
data-index={vi.index}
|
||||
ref={gridVirtualizer.measureElement}
|
||||
className="absolute left-0 top-0 w-full will-change-transform"
|
||||
style={{ transform: `translateY(${vi.start}px)` }}
|
||||
>
|
||||
<div
|
||||
className="grid gap-3"
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))`,
|
||||
}}
|
||||
className={cn(
|
||||
"absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-md border transition-colors",
|
||||
isSel
|
||||
? "border-[var(--admin-accent)] bg-[var(--admin-accent)]"
|
||||
: "border-[var(--admin-border)] bg-[var(--admin-surface)] hover:border-[var(--admin-accent)]/60",
|
||||
)}
|
||||
aria-label={`${isSel ? "Deselect" : "Select"} ${item.name}`}
|
||||
aria-pressed={isSel}
|
||||
>
|
||||
{isSel ? (
|
||||
<Check
|
||||
size={12}
|
||||
className="text-[var(--admin-accent-foreground)]"
|
||||
/>
|
||||
) : null}
|
||||
</button>
|
||||
{rowItems.map((item) => {
|
||||
const isSel = selected.has(item.classname);
|
||||
return (
|
||||
<div
|
||||
key={item.classname}
|
||||
className="group relative"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openDetail(item)}
|
||||
className={cn(
|
||||
"flex w-full flex-col overflow-hidden rounded-xl border text-left transition-all outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
|
||||
isSel
|
||||
? "border-[var(--admin-accent)] bg-[var(--admin-accent)]/10 ring-2 ring-[var(--admin-accent)]/20"
|
||||
: "border-[var(--admin-border)] bg-[var(--admin-surface)] hover:-translate-y-0.5 hover:border-[var(--admin-accent)]/60 hover:shadow-lg hover:shadow-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="relative flex h-24 items-center justify-center overflow-hidden"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--admin-text-muted) 14%, transparent) 1px, transparent 0)",
|
||||
backgroundSize: "14px 14px",
|
||||
}}
|
||||
>
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-10 bg-gradient-to-b from-[var(--admin-text)]/5 to-transparent" />
|
||||
<img
|
||||
src={getFurniImageUrl(item)}
|
||||
alt={item.name}
|
||||
className="h-14 w-14 object-contain drop-shadow-[0_2px_4px_rgba(0,0,0,0.25)] transition-transform duration-200 group-hover:scale-110"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onError={(e) => handleImgError(e, item)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-start justify-between gap-1 border-t border-[var(--admin-border)] px-2 py-1.5">
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-xs font-semibold text-[var(--admin-text)]">
|
||||
{item.name}
|
||||
</p>
|
||||
<p className="truncate font-mono text-[0.6rem] text-[var(--admin-text-muted)]">
|
||||
{item.classname}
|
||||
</p>
|
||||
<p className="truncate text-[0.6rem] text-[var(--admin-text-muted)]/80">
|
||||
{item.category || "—"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 px-2 pb-1.5">
|
||||
<Badge className="h-4 bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]">
|
||||
{TYPE_LABELS[item.type] ?? item.type}
|
||||
</Badge>
|
||||
{item.alreadyImported ? (
|
||||
<>
|
||||
{!item.nitroExists && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
|
||||
>
|
||||
No nitro
|
||||
</Badge>
|
||||
)}
|
||||
{item.hasFurnidata === false && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
|
||||
>
|
||||
No furnidata
|
||||
</Badge>
|
||||
)}
|
||||
{item.hasCatalogEntry === false && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
|
||||
>
|
||||
No catalog
|
||||
</Badge>
|
||||
)}
|
||||
{item.nitroExists &&
|
||||
item.hasFurnidata !== false &&
|
||||
item.hasCatalogEntry !== false && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[var(--admin-success)] border-[var(--admin-success)]/40"
|
||||
>
|
||||
Imported
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Badge className="h-4 bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]">
|
||||
New
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleSelect(item.classname);
|
||||
}}
|
||||
className={cn(
|
||||
"absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-md border transition-all",
|
||||
isSel
|
||||
? "scale-105 border-[var(--admin-accent)] bg-[var(--admin-accent)] shadow-md shadow-[var(--admin-accent)]/30"
|
||||
: "border-[var(--admin-border)] bg-[var(--admin-surface)] opacity-70 hover:border-[var(--admin-accent)]/60 hover:opacity-100",
|
||||
)}
|
||||
aria-label={`${isSel ? "Deselect" : "Select"} ${item.name}`}
|
||||
aria-pressed={isSel}
|
||||
>
|
||||
{isSel ? (
|
||||
<Check
|
||||
size={12}
|
||||
className="text-[var(--admin-accent-foreground)]"
|
||||
/>
|
||||
) : null}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@@ -1956,29 +2063,33 @@ export function StudioClient({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{meta && meta.currentPage < meta.lastPage && (
|
||||
<div className="mt-4 flex justify-center">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() =>
|
||||
fetchItems(
|
||||
activeSearch,
|
||||
meta.currentPage + 1,
|
||||
activeSource,
|
||||
)
|
||||
}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
) : (
|
||||
<Download size={14} />
|
||||
)}
|
||||
Load more ({meta.total - meta.currentPage * meta.perPage}{" "}
|
||||
left)
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
ref={sentinelRef}
|
||||
className="mt-4 flex flex-col items-center justify-center gap-2 py-2 text-xs text-[var(--admin-text-muted)]"
|
||||
>
|
||||
{hasMorePages ? (
|
||||
loading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<Loader2
|
||||
size={14}
|
||||
className="animate-spin text-[var(--admin-accent)]"
|
||||
/>
|
||||
Loading more…
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<ArrowDown size={12} />
|
||||
Scroll for more
|
||||
</span>
|
||||
)
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="h-px w-8 bg-[var(--admin-border)]" />
|
||||
End of results
|
||||
<span className="h-px w-8 bg-[var(--admin-border)]" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user