Refactor: Add button feedback

src/pages/admin/ErrorMonitoring.tsx

@@ -5,9 +5,9 @@ import { AdminLayout } from '@/components/layout/AdminLayout';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { AlertCircle, RefreshCw } from 'lucide-react';
+import { AlertCircle } from 'lucide-react';
+import { RefreshButton } from '@/components/ui/refresh-button';
 import { ErrorDetailsModal } from '@/components/admin/ErrorDetailsModal';
 import { ErrorAnalytics } from '@/components/admin/ErrorAnalytics';
 import { format } from 'date-fns';
@@ -33,7 +33,7 @@ export default function ErrorMonitoring() {
   const [dateRange, setDateRange] = useState<'1h' | '24h' | '7d' | '30d'>('24h');
 
   // Fetch recent errors
-  const { data: errors, isLoading, refetch } = useQuery({
+  const { data: errors, isLoading, refetch, isFetching } = useQuery({
     queryKey: ['admin-errors', dateRange, errorTypeFilter, searchTerm],
     queryFn: async () => {
       let query = supabase
@@ -88,10 +88,12 @@ export default function ErrorMonitoring() {
             <h1 className="text-3xl font-bold tracking-tight">Error Monitoring</h1>
             <p className="text-muted-foreground">Track and analyze application errors</p>
           </div>
-          <Button onClick={() => refetch()} variant="outline" size="sm">
-            <RefreshCw className="w-4 h-4 mr-2" />
-            Refresh
-          </Button>
+          <RefreshButton
+            onRefresh={async () => { await refetch(); }}
+            isLoading={isFetching}
+            variant="outline"
+            size="sm"
+          />
         </div>
 
         {/* Analytics Section */}