From 835ec4782c1e4cb26a4f6e311dc8db9cd50ea1a6 Mon Sep 17 00:00:00 2001
From: aits2026 <wxdaochu@gmail.com>
Date: Thu, 5 Mar 2026 17:15:33 +0800
Subject: [PATCH] feat(export): show spinner in load detail in-progress status

---
 src/pages/ExportPage.scss | 13 +++++++++++++
 src/pages/ExportPage.tsx  | 14 ++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss
index 7c227ea..78cb3a1 100644
--- a/src/pages/ExportPage.scss
+++ b/src/pages/ExportPage.scss
@@ -228,6 +228,19 @@
   }
 }
 
+.session-load-detail-status-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  min-width: 0;
+}
+
+.session-load-detail-status-icon {
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
 .global-export-controls {
   background: var(--card-bg);
   border: 1px solid var(--border-color);
diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx
index 34c1960..b005bb1 100644
--- a/src/pages/ExportPage.tsx
+++ b/src/pages/ExportPage.tsx
@@ -5014,7 +5014,12 @@ function ExportPage() {
                       {sessionLoadDetailRows.map((row) => (
                         <div className="session-load-detail-row" key={`message-${row.tab}`}>
                           <span>{row.label}</span>
-                          <span>{row.messageCount.statusLabel}</span>
+                          <span className="session-load-detail-status-cell">
+                            <span>{row.messageCount.statusLabel}</span>
+                            {row.messageCount.statusLabel.startsWith('加载中') && (
+                              <Loader2 size={12} className="spin session-load-detail-status-icon" aria-label="加载中" />
+                            )}
+                          </span>
                           <span>{formatLoadDetailTime(row.messageCount.startedAt)}</span>
                           <span>{formatLoadDetailTime(row.messageCount.finishedAt)}</span>
                         </div>
@@ -5034,7 +5039,12 @@ function ExportPage() {
                       {sessionLoadDetailRows.map((row) => (
                         <div className="session-load-detail-row" key={`media-${row.tab}`}>
                           <span>{row.label}</span>
-                          <span>{row.mediaMetrics.statusLabel}</span>
+                          <span className="session-load-detail-status-cell">
+                            <span>{row.mediaMetrics.statusLabel}</span>
+                            {row.mediaMetrics.statusLabel.startsWith('加载中') && (
+                              <Loader2 size={12} className="spin session-load-detail-status-icon" aria-label="加载中" />
+                            )}
+                          </span>
                           <span>{formatLoadDetailTime(row.mediaMetrics.startedAt)}</span>
                           <span>{formatLoadDetailTime(row.mediaMetrics.finishedAt)}</span>
                         </div>