fix(ui): clear compact spinner when has_summary becomes true

Previously the spinner only cleared after a 120s timeout. Now a
useEffect watches the groups data and immediately clears the spinner
and polling when the compacting group's has_summary transitions to true.
This commit is contained in:
viettranx committed 2026-03-11 16:54:24 +07:00
1 parent b71e8abb5d
commit 771a6538c0
1 file changed
+29 -4
@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState, useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import { Inbox, RefreshCw, Trash2, Archive, Loader2, Info, ChevronDown, ChevronUp } from "lucide-react";
import { Button } from "@/components/ui/button";
@@ -33,11 +33,30 @@ export function PendingMessagesPage() {
const [confirmClear, setConfirmClear] = useState<PendingMessageGroup | null>(null);
const [actionLoading, setActionLoading] = useState<string | null>(null);
const [compactingKey, setCompactingKey] = useState<string | null>(null);
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => {
loadGroups();
}, [loadGroups]);
// Clear spinner as soon as the compacting group's has_summary becomes true
useEffect(() => {
if (!compactingKey) return;
const [channel, historyKey] = compactingKey.split("/");
const group = groups.find(
(g) => g.channel_name === channel && g.history_key === historyKey,
);
if (group?.has_summary) {
if (pollRef.current) clearInterval(pollRef.current);
if (timeoutRef.current) clearTimeout(timeoutRef.current);
pollRef.current = null;
timeoutRef.current = null;
setCompactingKey(null);
setActionLoading(null);
}
}, [groups, compactingKey]);
const handleRefresh = () => loadGroups();
const handleCompact = async (e: React.MouseEvent, group: PendingMessageGroup) => {
@@ -52,10 +71,16 @@ export function PendingMessagesPage() {
return;
}
// Backend runs LLM in background — poll until done (has_summary changes).
// Compact button is already disabled when has_summary=true.
const poll = setInterval(() => loadGroups(), 5000);
// useEffect above clears spinner when has_summary becomes true.
pollRef.current = setInterval(() => loadGroups(), 5000);
setTimeout(() => loadGroups(), 2000); // quick first check
setTimeout(() => { clearInterval(poll); setCompactingKey(null); setActionLoading(null); }, 120_000);
timeoutRef.current = setTimeout(() => {
if (pollRef.current) clearInterval(pollRef.current);
pollRef.current = null;
timeoutRef.current = null;
setCompactingKey(null);
setActionLoading(null);
}, 120_000);
};
const handleClear = async (group: PendingMessageGroup) => {