diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx
index 61437ec8d..99d08febe 100644
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@@ -159,6 +159,17 @@ function buildDefaultAgentProjectTitle() {
   return `生图项目 ${month}-${day} ${hour}:${minute}`;
 }
 
+function areStringArraysEqual(left: string[], right: string[]) {
+  if (left === right) return true;
+  if (left.length !== right.length) return false;
+  for (let index = 0; index < left.length; index += 1) {
+    if (left[index] !== right[index]) {
+      return false;
+    }
+  }
+  return true;
+}
+
 export default function CanvasEditorPage({ params }: PageProps) {
   // 使用 useParams 确保客户端导航时能正确获取更新的 id
   const routeParams = useParams();
@@ -826,6 +837,16 @@ export default function CanvasEditorPage({ params }: PageProps) {
     [agentProjectId, updateCanvasSearchParams]
   );
 
+  const handleAgentResultPreviewUrlsChange = useCallback((urls: string[]) => {
+    setAgentProjectResultUrls((current) =>
+      areStringArraysEqual(current, urls) ? current : urls
+    );
+    setAgentProjectThumbnail((current) => {
+      const nextThumbnail = urls[0] || null;
+      return current === nextThumbnail ? current : nextThumbnail;
+    });
+  }, []);
+
   useEffect(() => {
     if (!selectedBrandModel) return;
     const normalizedBrand = workflowInputs.brand.trim().toLowerCase();
@@ -1409,12 +1430,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
         onAgentModeStateChange={setAgentModeState}
         workspaceState={agentWorkspaceState}
         onWorkspaceStateChange={setAgentWorkspaceState}
-        onResultPreviewUrlsChange={(urls) => {
-          setAgentProjectResultUrls(urls);
-          if (urls[0]) {
-            setAgentProjectThumbnail(urls[0]);
-          }
-        }}
+        onResultPreviewUrlsChange={handleAgentResultPreviewUrlsChange}
         siteName={siteSettingsData?.siteName}
         siteLogo={siteSettingsData?.siteLogo}
         siteLogoDark={siteSettingsData?.siteLogoDark}
diff --git a/components/agents/AgentWorkflowBrandModelPicker.tsx b/components/agents/AgentWorkflowBrandModelPicker.tsx
index ad6ce49c5..59a785679 100644
--- a/components/agents/AgentWorkflowBrandModelPicker.tsx
+++ b/components/agents/AgentWorkflowBrandModelPicker.tsx
@@ -2,7 +2,7 @@
 
 import { useMemo } from "react";
 import useSWR from "swr";
-import { Check, ImageIcon, UserRound } from "lucide-react";
+import { Check, ImageIcon, Loader2, UserRound } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn, fetcher } from "@/lib/utils";
 import { normalizeAgentWorkflowBrandModelConfig } from "@/lib/agents/workflow-brand-model-config";
@@ -43,6 +43,60 @@ export function AgentWorkflowBrandModelPicker({
   );
   const images = matchedEntry?.images || [];
   const isDark = theme === "dark";
+  const isLoading = !data;
+
+  const renderPlaceholderGrid = (message: string, iconMode: "loading" | "empty" = "empty") => (
+    <div className="space-y-3">
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, index) => (
+          <div
+            key={`brand-model-placeholder-${index}`}
+            className={cn(
+              "overflow-hidden rounded-[24px] border bg-background",
+              isDark ? "border-white/12 bg-white/[0.02]" : "border-border bg-muted/20"
+            )}
+          >
+            <div
+              className={cn(
+                "relative aspect-square overflow-hidden",
+                isDark
+                  ? "bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08),transparent_55%),linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))]"
+                  : "bg-muted/40"
+              )}
+            >
+              <div className="flex h-full w-full flex-col items-center justify-center gap-3">
+                {iconMode === "loading" ? (
+                  <Loader2 className="h-6 w-6 animate-spin text-white/55" />
+                ) : (
+                  <ImageIcon className="h-6 w-6 text-white/28" />
+                )}
+                <div className="h-2 w-20 rounded-full bg-white/10" />
+                <div className="h-2 w-14 rounded-full bg-white/10" />
+              </div>
+              <div className="absolute inset-x-0 top-0 px-2 py-2">
+                <span className="rounded-full bg-black/60 px-2 py-1 text-[11px] text-white">
+                  {iconMode === "loading" ? "加载中" : "模特预览"}
+                </span>
+              </div>
+            </div>
+            <div className="space-y-1 px-3 py-2">
+              <div className="h-3 w-3/4 rounded-full bg-white/10" />
+              <div className="h-2.5 w-1/2 rounded-full bg-white/10" />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div
+        className={cn(
+          "flex items-center justify-center rounded-[20px] border border-dashed px-4 py-3 text-center text-sm",
+          isDark ? "border-white/12 bg-black/20 text-white/55" : "bg-background/60 text-muted-foreground"
+        )}
+      >
+        {message}
+      </div>
+    </div>
+  );
 
   return (
     <section
@@ -71,18 +125,10 @@ export function AgentWorkflowBrandModelPicker({
         </div>
       </div>
 
-      {!normalizedBrand ? (
-        <div
-          className={cn(
-            "flex min-h-[124px] flex-col items-center justify-center rounded-[24px] border border-dashed px-4 text-center text-sm",
-            isDark
-              ? "border-white/12 bg-black/20 text-white/45"
-              : "bg-background/60 text-muted-foreground"
-          )}
-        >
-          <ImageIcon className="mb-2 h-5 w-5 opacity-60" />
-          先回到第一步选择品牌，第二步才会按品牌展示可选模特图。
-        </div>
+      {isLoading ? (
+        renderPlaceholderGrid("正在加载品牌模特图库，请稍候...", "loading")
+      ) : !normalizedBrand ? (
+        renderPlaceholderGrid("先回到第一步选择品牌，第二步才会按品牌展示可选模特图。")
       ) : images.length > 0 ? (
         <div className="space-y-3">
           <div className="flex flex-wrap items-center justify-between gap-2">
@@ -125,7 +171,7 @@ export function AgentWorkflowBrandModelPicker({
             </Button>
           </div>
 
-          <div className="grid grid-cols-2 gap-3 xl:grid-cols-3">
+          <div className="grid grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-4">
             {images.map((image) => {
               const selected =
                 selectedBrandModel?.brandName === normalizedBrand &&
@@ -203,19 +249,7 @@ export function AgentWorkflowBrandModelPicker({
             })}
           </div>
         </div>
-      ) : (
-        <div
-          className={cn(
-            "flex min-h-[124px] flex-col items-center justify-center rounded-[24px] border border-dashed px-4 text-center text-sm",
-            isDark
-              ? "border-white/12 bg-black/20 text-white/45"
-              : "bg-background/60 text-muted-foreground"
-          )}
-        >
-          <ImageIcon className="mb-2 h-5 w-5 opacity-60" />
-          品牌“{normalizedBrand}”暂未配置模特图库，请到系统设置上传对应模特图。
-        </div>
-      )}
+      ) : renderPlaceholderGrid(`品牌“${normalizedBrand}”暂未配置模特图库，请到系统设置上传对应模特图。`)}
     </section>
   );
 }