refactor(webui): adopt semantic page actions

webui/src/features/payments/PaymentsPage.tsx

@@ -1,4 +1,4 @@
-import { CheckCircle2, Plus, RefreshCw } from "lucide-react";
+import { CheckCircle2, Plus } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
   Button,
@@ -7,7 +7,6 @@ import {
   DismissibleAlert,
   DocumentationHelpLink,
   FilterBar,
-  IconButton,
   MetricCard,
   MetricGrid,
   PageActionBar,
@@ -281,7 +280,7 @@ export default function PaymentsPage({ settings, auth }: PlatformRouteContext) {
             interfaceId="payments.workspace.actions"
             helpContextId="payments.workspace"
             helpModuleId="payments"
-            reloadAction={<IconButton label="Reload payment requests" icon={<RefreshCw size={17} />} variant="ghost" onClick={() => void reload()} disabled={refreshing} />}
+            reloadAction={{ onReload: () => void reload(), loading: refreshing, label: "Reload payment requests" }}
             helpAction={<DocumentationHelpLink reference={{ topicId: "payments.requests-and-reconciliation", documentationType: "user" }} label="Open Payments documentation" />}
             createAction={createButton}
           />