From d14fc0c188d638d37c4de21d239c524549561095 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Mon, 1 Jun 2026 14:51:37 +0800
Subject: [PATCH] fix: stabilize material grid hook order

---
 .../agents/AgentWorkflowMaterialPicker.tsx    | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

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}