refactor(ui): migrate remaining loading placeholders

Author: Aparencia

app/src/components/GoalDetail.tsx

@@ -14,7 +14,7 @@ import InterviewDialog from "./InterviewDialog";
 import GraduateDialog from "./GraduateDialog";
 import RetroTimeline from "./RetroTimeline";
 import GoalPlanApprovalDialog from "./GoalPlanApprovalDialog";
-import { ConfirmDialog, EmptyState } from "../ui/primitives";
+import { ConfirmDialog, EmptyState, Loading, Skeleton } from "../ui/primitives";
 
 interface Props {
   goalId: number;
@@ -84,7 +84,18 @@ export default function GoalDetail({ goalId, onChanged, onDeleted }: Props) {
   };
 
   if (err && !detail) return <div style={{ padding: 24, fontSize: 13, color: "#dc2626" }}>{err}</div>;
-  if (!detail) return <div style={{ padding: 24, fontSize: 13, color: "#9ca3af" }}>加载中…</div>;
+  if (!detail) {
+    // 批 4 T14：详情面板结构已知（目标 + 里程碑 + 准则）⇒ 骨架占位；可读语义由 `Loading` 给
+    // （骨架整组 aria-hidden —— 只留骨架等于把"在等什么"从无障碍树里删掉）。
+    return (
+      <div style={{ padding: 24 }}>
+        <Loading />
+        <div style={{ marginTop: 10 }}>
+          <Skeleton lines={3} />
+        </div>
+      </div>
+    );
+  }
 
   const { goal, milestones, criteria } = detail;
   const p = progress?.progress;

app/src/components/RefineWorkbench.tsx

@@ -19,7 +19,7 @@
  *              两栏的**独立滚动 + 同步滚动**保留（见 `PANE_MAX_H` 的 Why）。
  */
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Modal, EmptyState } from "../ui/primitives";
+import { Modal, EmptyState, Loading, Skeleton } from "../ui/primitives";
 import { invoke } from "@tauri-apps/api/core";
 import type { AiRefineResult, DiffOp, MarkdownDiffOps, RefineStrategyInfo, RefineStrategyMeta, WorkbenchData } from "../types";
 import { escapeHtml } from "../utils/html";
@@ -282,8 +282,12 @@ export default function RefineWorkbench({
   if (status === "loading") {
     return (
       <Modal open onClose={onClose} title="精修工作台" size="l" testId="refine-workbench">
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: 160 }}>
-          <p style={{ fontSize: 13, color: "#6b7280" }}>⏳ 加载工作台数据…</p>
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: 160 }}>
+          {/* 批 4 T14：双栏对照的形状已知 ⇒ 骨架；文案逐字保留（含 ⏳ —— 装饰 emoji 规则只覆盖弹层标题） */}
+          <Loading label="⏳ 加载工作台数据…" />
+          <div style={{ marginTop: 10, width: "100%" }}>
+            <Skeleton lines={4} />
+          </div>
         </div>
       </Modal>
     );

app/src/components/SecondPassPanel.tsx

@@ -213,7 +213,8 @@ export default function SecondPassPanel({ sessionId, onChanged, onClose }: Props
       </div>
 
       {view === null ? (
-        <p style={{ color: "#9ca3af", fontSize: 12 }}>加载中…</p>
+        /* 批 4 T14：草稿行数未知（`view === null` 时无计数）⇒ 带文案的 Loading（默认「加载中…」） */
+        <Loading />
       ) : view.total === 0 ? (
         view.running ? (
           <Loading label="任务已启动，等待首个窗口…" />

app/src/pages/ReviewPage.tsx

@@ -20,6 +20,7 @@ import { invoke } from "@tauri-apps/api/core";
 import type { NoteGroup } from "../types/notes";
 import ReviewSessionPanel from "../components/review/ReviewSessionPanel";
 import { dueGroupRows, scopeDueCount, scopeLabel } from "../utils/reviewStats";
+import { Loading, Skeleton } from "../ui/primitives";
 
 interface Props {
   /** 页面是否可见（App 层 display 门控同步透传——切回时重载到期统计） */
@@ -198,7 +199,15 @@ export default function ReviewPage({ active, focusGroupId, onFocusGroupConsumed
 
       {/* 主体：加载/错误/空态/范围引导（会话开始后切换为会话面板） */}
       <div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: 24 }}>
-        {!loaded && <p style={{ fontSize: 13, color: "#9ca3af" }}>加载中…</p>}
+        {!loaded && (
+          <div>
+            {/* 批 4 T14：起始卡结构已知（标题 + 正文块）⇒ 骨架；可读语义由 `Loading` 给 */}
+            <Loading />
+            <div style={{ marginTop: 10 }}>
+              <Skeleton lines={3} />
+            </div>
+          </div>
+        )}
         {status && <p data-testid="review-status" style={{ fontSize: 12, color: "#dc2626" }}>{status}</p>}
         {loaded && !status && scopeDue <= 0 && (
           <div data-testid="review-empty" style={{ textAlign: "center", padding: "56px 0", maxWidth: 480, margin: "0 auto" }}>