lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stabilize material grid hook order

Browse Source
This commit is contained in:
Your Name 2026-06-01 14:51:37 +08:00
parent f455b433ec
commit d14fc0c188
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/agents/AgentWorkflowMaterialPicker.tsx
View File

@ -254,6 +254,19 @@ function MaterialImageGrid({
if (containerWidth >= 900) return 3;
return 2;
}, [containerWidth]);
const rowCount = Math.ceil(images.length / columnCount);
const cardWidth =
containerWidth > 0
? Math.floor((containerWidth - MATERIAL_GRID_GAP * (columnCount - 1)) / columnCount)
: 240;
const rowHeight = Math.max(MATERIAL_GRID_MIN_CARD_HEIGHT, cardWidth + 74);
// Keep hook order stable when SKU loading placeholders and final images cross the virtualization threshold.
const rowVirtualizer = useVirtualizer({
count: rowCount,
getScrollElement: () => parentRef.current,
estimateSize: () => rowHeight + MATERIAL_GRID_GAP,
overscan: 2,
});
if (
!AGENT_STYLE_OPTIMIZED_RENDER_ENABLED ||
@ -274,19 +287,6 @@ function MaterialImageGrid({
);
}
const rowCount = Math.ceil(images.length / columnCount);
const cardWidth =
containerWidth > 0
? Math.floor((containerWidth - MATERIAL_GRID_GAP * (columnCount - 1)) / columnCount)
: 240;
const rowHeight = Math.max(MATERIAL_GRID_MIN_CARD_HEIGHT, cardWidth + 74);
const rowVirtualizer = useVirtualizer({
count: rowCount,
getScrollElement: () => parentRef.current,
estimateSize: () => rowHeight + MATERIAL_GRID_GAP,
overscan: 2,
});
return (
<div
ref={parentRef}