From 936e9586994c5f172b6e05ea049a1679a2e97acc Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Thu, 5 Mar 2026 12:55:56 +0700
Subject: [PATCH] fix(ui): move refresh buttons back into tab content with
 useMinLoading

Use variant="outline" and useMinLoading for proper spin animation,
matching the pattern used across other pages (traces, channels, etc.).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/web/src/pages/teams/team-delegations-tab.tsx | 7 ++++---
 ui/web/src/pages/teams/team-detail-page.tsx     | 3 ++-
 ui/web/src/pages/teams/team-tasks-tab.tsx       | 7 ++++---
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/ui/web/src/pages/teams/team-delegations-tab.tsx b/ui/web/src/pages/teams/team-delegations-tab.tsx
index 87235254..5db6de39 100644
--- a/ui/web/src/pages/teams/team-delegations-tab.tsx
+++ b/ui/web/src/pages/teams/team-delegations-tab.tsx
@@ -4,6 +4,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { EmptyState } from "@/components/shared/empty-state";
 import { DeferredSpinner } from "@/components/shared/loading-skeleton";
+import { useMinLoading } from "@/hooks/use-min-loading";
 import { formatDate, formatDuration } from "@/lib/format";
 import { useTeamDelegations } from "./hooks/use-team-delegations";
 import { useDelegations } from "@/pages/delegations/hooks/use-delegations";
@@ -19,6 +20,7 @@ export function TeamDelegationsTab({ teamId }: TeamDelegationsTabProps) {
   const { getDelegation } = useDelegations();
   const { getTrace } = useTraces();
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const spinning = useMinLoading(loading);
 
   if (loading && records.length === 0) return <DeferredSpinner />;
 
@@ -35,9 +37,8 @@ export function TeamDelegationsTab({ teamId }: TeamDelegationsTabProps) {
   return (
     <>
       <div className="mb-4 flex justify-end">
-        <Button variant="ghost" size="sm" onClick={refresh} disabled={loading} className="gap-1.5">
-          <RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
-          Refresh
+        <Button variant="outline" size="sm" onClick={refresh} disabled={spinning} className="gap-1">
+          <RefreshCw className={"h-3.5 w-3.5" + (spinning ? " animate-spin" : "")} /> Refresh
         </Button>
       </div>
       <div className="rounded-md border overflow-x-auto">
diff --git a/ui/web/src/pages/teams/team-detail-page.tsx b/ui/web/src/pages/teams/team-detail-page.tsx
index 8487a338..30f9cb2f 100644
--- a/ui/web/src/pages/teams/team-detail-page.tsx
+++ b/ui/web/src/pages/teams/team-detail-page.tsx
@@ -21,6 +21,7 @@ export function TeamDetailPage({ teamId, onBack }: TeamDetailPageProps) {
   const [team, setTeam] = useState<TeamData | null>(null);
   const [members, setMembers] = useState<TeamMemberData[]>([]);
   const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState("members");
 
   const reload = useCallback(async () => {
     try {
@@ -106,7 +107,7 @@ export function TeamDetailPage({ teamId, onBack }: TeamDetailPageProps) {
 
       {/* Tabs */}
       <div className="max-w-4xl">
-        <Tabs defaultValue="members">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
           <TabsList className="w-full justify-start overflow-x-auto overflow-y-hidden">
             <TabsTrigger value="members">Members</TabsTrigger>
             <TabsTrigger value="tasks">Tasks</TabsTrigger>
diff --git a/ui/web/src/pages/teams/team-tasks-tab.tsx b/ui/web/src/pages/teams/team-tasks-tab.tsx
index 319c2073..57e90a36 100644
--- a/ui/web/src/pages/teams/team-tasks-tab.tsx
+++ b/ui/web/src/pages/teams/team-tasks-tab.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { RefreshCw } from "lucide-react";
+import { useMinLoading } from "@/hooks/use-min-loading";
 import type { TeamTaskData } from "@/types/team";
 import { TaskList } from "./task-sections";
 
@@ -12,6 +13,7 @@ interface TeamTasksTabProps {
 export function TeamTasksTab({ teamId, getTeamTasks }: TeamTasksTabProps) {
   const [tasks, setTasks] = useState<TeamTaskData[]>([]);
   const [loading, setLoading] = useState(true);
+  const spinning = useMinLoading(loading);
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -32,9 +34,8 @@ export function TeamTasksTab({ teamId, getTeamTasks }: TeamTasksTabProps) {
   return (
     <div className="space-y-4">
       <div className="flex justify-end">
-        <Button variant="ghost" size="sm" onClick={load} disabled={loading} className="gap-1.5">
-          <RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
-          Refresh
+        <Button variant="outline" size="sm" onClick={load} disabled={spinning} className="gap-1">
+          <RefreshCw className={"h-3.5 w-3.5" + (spinning ? " animate-spin" : "")} /> Refresh
         </Button>
       </div>
       <TaskList tasks={tasks} loading={loading} />