Refactor: Add button feedback

src/components/layout/AdminHeader.tsx

@@ -1,5 +1,6 @@
-import { Shield, ArrowLeft, Settings, RefreshCw, Menu } from 'lucide-react';
+import { Shield, ArrowLeft, Settings, Menu } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { RefreshButton } from '@/components/ui/refresh-button';
 import { Link, useLocation } from 'react-router-dom';
 import { ThemeToggle } from '@/components/theme/ThemeToggle';
 import { AuthButtons } from '@/components/auth/AuthButtons';
@@ -15,7 +16,7 @@ import {
   SheetTrigger,
 } from '@/components/ui/sheet';
 
-export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
+export function AdminHeader({ onRefresh, isRefreshing }: { onRefresh?: () => void; isRefreshing?: boolean }) {
   const { permissions } = useUserRole();
   const { user } = useAuth();
   const location = useLocation();
@@ -68,14 +69,12 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
                   <span className="text-sm font-medium">Theme</span>
                   <ThemeToggle />
                 </div>
-                <Button 
-                  variant="ghost" 
-                  onClick={onRefresh}
-                  className="justify-start"
-                >
-                  <RefreshCw className="w-4 h-4 mr-2" />
-                  Refresh
-                </Button>
+                <RefreshButton
+                  onRefresh={onRefresh!}
+                  isLoading={isRefreshing}
+                  variant="ghost"
+                  className="justify-start w-full"
+                />
                 {permissions?.role_level === 'superuser' && !isSettingsPage && (
                   <Button variant="ghost" asChild className="justify-start">
                     <Link to="/admin/settings">
@@ -89,16 +88,15 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
           </Sheet>
 
           {/* Desktop Actions */}
-          <Button 
-            variant="ghost" 
-            size="sm" 
-            onClick={onRefresh}
-            title="Refresh admin data"
-            className="hidden md:flex"
-          >
-            <RefreshCw className="w-4 h-4" />
-            <span className="hidden sm:ml-2 sm:inline">Refresh</span>
-          </Button>
+          {onRefresh && (
+            <RefreshButton
+              onRefresh={onRefresh}
+              isLoading={isRefreshing}
+              variant="ghost"
+              size="sm"
+              className="hidden md:flex"
+            />
+          )}
           {permissions?.role_level === 'superuser' && !isSettingsPage && (
             <Button variant="ghost" size="sm" asChild className="hidden md:flex">
               <Link to="/admin/settings">

src/components/layout/AdminTopBar.tsx

@@ -1,5 +1,5 @@
 import { RefreshCw } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { RefreshButton } from '@/components/ui/refresh-button';
 import { ThemeToggle } from '@/components/theme/ThemeToggle';
 import { AuthButtons } from '@/components/auth/AuthButtons';
 import { NotificationCenter } from '@/components/notifications/NotificationCenter';
@@ -50,16 +50,12 @@ export function AdminTopBar({
         {/* Right Section */}
         <div className="flex items-center gap-2">
           {onRefresh && (
-            <Button
+            <RefreshButton
+              onRefresh={onRefresh}
+              isLoading={isRefreshing}
               variant="ghost"
               size="sm"
-              onClick={onRefresh}
-              disabled={isRefreshing}
-              title="Refresh data"
-            >
-              <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
-              <span className="hidden sm:ml-2 sm:inline">Refresh</span>
-            </Button>
+            />
           )}
           <ThemeToggle />
           {user && <NotificationCenter />}