From d43f4a42ad9f1ca32d4152775548c6ed17e940b8 Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Tue, 10 Mar 2026 00:46:29 +0700
Subject: [PATCH] feat(ui): add compacting loading state to pending messages

---
 ui/web/src/i18n/locales/en/pending-messages.json    |  1 +
 ui/web/src/i18n/locales/vi/pending-messages.json    |  5 +++--
 ui/web/src/i18n/locales/zh/pending-messages.json    |  1 +
 .../pending-messages/pending-messages-page.tsx      | 13 +++++++++++--
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/ui/web/src/i18n/locales/en/pending-messages.json b/ui/web/src/i18n/locales/en/pending-messages.json
index 4eadfece..b370357d 100644
--- a/ui/web/src/i18n/locales/en/pending-messages.json
+++ b/ui/web/src/i18n/locales/en/pending-messages.json
@@ -16,6 +16,7 @@
     "raw": "Raw"
   },
   "compact": "Compact",
+  "compacting": "Compacting…",
   "clear": "Clear",
   "confirmClear": {
     "title": "Clear messages?",
diff --git a/ui/web/src/i18n/locales/vi/pending-messages.json b/ui/web/src/i18n/locales/vi/pending-messages.json
index 5de8af3b..f4cb2b4e 100644
--- a/ui/web/src/i18n/locales/vi/pending-messages.json
+++ b/ui/web/src/i18n/locales/vi/pending-messages.json
@@ -12,10 +12,11 @@
     "actions": "Thao tác"
   },
   "status": {
-    "compacted": "Đã nén",
+    "compacted": "Đã tóm tắt",
     "raw": "Thô"
   },
-  "compact": "Nén",
+  "compact": "Tóm tắt",
+  "compacting": "Đang tóm tắt…",
   "clear": "Xóa",
   "confirmClear": {
     "title": "Xóa tin nhắn?",
diff --git a/ui/web/src/i18n/locales/zh/pending-messages.json b/ui/web/src/i18n/locales/zh/pending-messages.json
index 0e427748..12cea04b 100644
--- a/ui/web/src/i18n/locales/zh/pending-messages.json
+++ b/ui/web/src/i18n/locales/zh/pending-messages.json
@@ -16,6 +16,7 @@
     "raw": "原始"
   },
   "compact": "压缩",
+  "compacting": "压缩中…",
   "clear": "清除",
   "confirmClear": {
     "title": "清除消息？",
diff --git a/ui/web/src/pages/pending-messages/pending-messages-page.tsx b/ui/web/src/pages/pending-messages/pending-messages-page.tsx
index cc89ef20..05a16f46 100644
--- a/ui/web/src/pages/pending-messages/pending-messages-page.tsx
+++ b/ui/web/src/pages/pending-messages/pending-messages-page.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Inbox, RefreshCw, Trash2, Archive } from "lucide-react";
+import { Inbox, RefreshCw, Trash2, Archive, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { PageHeader } from "@/components/shared/page-header";
@@ -32,6 +32,7 @@ export function PendingMessagesPage() {
   const [selectedGroup, setSelectedGroup] = useState<PendingMessageGroup | null>(null);
   const [confirmClear, setConfirmClear] = useState<PendingMessageGroup | null>(null);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
+  const [compactingKey, setCompactingKey] = useState<string | null>(null);
 
   useEffect(() => {
     loadGroups();
@@ -43,7 +44,9 @@ export function PendingMessagesPage() {
     e.stopPropagation();
     const key = `${group.channel_name}/${group.history_key}`;
     setActionLoading(key);
+    setCompactingKey(key);
     await compactGroup(group.channel_name, group.history_key);
+    setCompactingKey(null);
     setActionLoading(null);
     loadGroups();
   };
@@ -95,6 +98,7 @@ export function PendingMessagesPage() {
                 {groups.map((g) => {
                   const rowKey = `${g.channel_name}/${g.history_key}`;
                   const busy = actionLoading === rowKey;
+                  const isCompacting = compactingKey === rowKey;
                   return (
                     <tr
                       key={rowKey}
@@ -129,7 +133,12 @@ export function PendingMessagesPage() {
                             disabled={busy || g.has_summary}
                             onClick={(e) => handleCompact(e, g)}
                           >
-                            <Archive className="h-3 w-3" /> {t("compact")}
+                            {isCompacting ? (
+                              <Loader2 className="h-3 w-3 animate-spin" />
+                            ) : (
+                              <Archive className="h-3 w-3" />
+                            )}
+                            {isCompacting ? t("compacting") : t("compact")}
                           </Button>
                           <Button
                             variant="outline"