feat: add pendingAuthRequestsRefreshing state to improve loading feedback in auth request components

webapp/src/components/AppMainRoutes.tsx

@@ -119,6 +119,7 @@ export interface AppMainRoutesProps {
   onDeleteAccountPasskey: (id: string, masterPassword: string) => Promise<void>;
   pendingAuthRequests: AuthRequest[];
   pendingAuthRequestsLoading: boolean;
+  pendingAuthRequestsRefreshing: boolean;
   onRefreshPendingAuthRequests: () => Promise<void>;
   onApproveAuthRequest: (request: AuthRequest) => Promise<void>;
   onDenyAuthRequest: (request: AuthRequest) => Promise<void>;
@@ -354,6 +355,7 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
                 error={props.authorizedDevicesError}
                 pendingAuthRequests={props.pendingAuthRequests}
                 pendingAuthRequestsLoading={props.pendingAuthRequestsLoading}
+                pendingAuthRequestsRefreshing={props.pendingAuthRequestsRefreshing}
                 onRefresh={() => void props.onRefreshAuthorizedDevices()}
                 onRefreshPendingAuthRequests={props.onRefreshPendingAuthRequests}
                 onApproveAuthRequest={props.onApproveAuthRequest}

webapp/src/components/PendingAuthRequestsPanel.tsx

@@ -7,6 +7,7 @@ import { t } from '@/lib/i18n';
 interface PendingAuthRequestsPanelProps {
   pendingAuthRequests: AuthRequest[];
   pendingAuthRequestsLoading: boolean;
+  pendingAuthRequestsRefreshing?: boolean;
   onRefreshPendingAuthRequests: () => Promise<void>;
   onApproveAuthRequest: (request: AuthRequest) => Promise<void>;
   onDenyAuthRequest: (request: AuthRequest) => Promise<void>;
@@ -22,6 +23,7 @@ function formatDateTime(value: string | null | undefined): string {
 
 export default function PendingAuthRequestsPanel(props: PendingAuthRequestsPanelProps) {
   const [authRequestSubmittingId, setAuthRequestSubmittingId] = useState<string | null>(null);
+  const refreshing = props.pendingAuthRequestsLoading || !!props.pendingAuthRequestsRefreshing;
 
   async function approveAuthRequest(authRequest: AuthRequest): Promise<void> {
     if (authRequestSubmittingId) return;
@@ -50,10 +52,10 @@ export default function PendingAuthRequestsPanel(props: PendingAuthRequestsPanel
         <button
           type="button"
           className="btn btn-secondary small"
-          disabled={props.pendingAuthRequestsLoading}
+          disabled={refreshing}
           onClick={() => void props.onRefreshPendingAuthRequests()}
         >
-          <RefreshCw size={14} className="btn-icon" />
+          <RefreshCw size={14} className={`btn-icon${refreshing ? ' btn-icon-spin' : ''}`} />
           {t('txt_refresh')}
         </button>
       </div>

webapp/src/components/SecurityDevicesPage.tsx

@@ -13,6 +13,7 @@ interface SecurityDevicesPageProps {
   error: string;
   pendingAuthRequests: AuthRequest[];
   pendingAuthRequestsLoading: boolean;
+  pendingAuthRequestsRefreshing: boolean;
   onRefresh: () => void;
   onRefreshPendingAuthRequests: () => Promise<void>;
   onApproveAuthRequest: (request: AuthRequest) => Promise<void>;
@@ -106,6 +107,7 @@ export default function SecurityDevicesPage(props: SecurityDevicesPageProps) {
           loadingVariant="compact"
           pendingAuthRequests={props.pendingAuthRequests}
           pendingAuthRequestsLoading={props.pendingAuthRequestsLoading}
+          pendingAuthRequestsRefreshing={props.pendingAuthRequestsRefreshing}
           onRefreshPendingAuthRequests={props.onRefreshPendingAuthRequests}
           onApproveAuthRequest={props.onApproveAuthRequest}
           onDenyAuthRequest={props.onDenyAuthRequest}