diff --git a/components/agents/AgentWorkflowMaterialPicker.tsx b/components/agents/AgentWorkflowMaterialPicker.tsx
index f71b12fc5..38848d896 100644
--- a/components/agents/AgentWorkflowMaterialPicker.tsx
+++ b/components/agents/AgentWorkflowMaterialPicker.tsx
@@ -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}