diff --git a/src/app/admin/animal-adoptions/page.tsx b/src/app/admin/animal-adoptions/page.tsx
index 7174771..1b9eb38 100644
--- a/src/app/admin/animal-adoptions/page.tsx
+++ b/src/app/admin/animal-adoptions/page.tsx
@@ -12,6 +12,7 @@ import { useToast } from "@/hooks/use-toast";
 import { useMutation } from "@/hooks/use-mutation";
 import { useUnsavedChangesGuard } from "@/hooks/use-unsaved-changes";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { logError } from "@/lib/logger";
 import {
   AnimalAdoptionsContent,
@@ -117,7 +118,7 @@ export default function AnimalAdoptionsAdminPage() {
   };
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <AdminLoading label="adoptions content" />;
   }
 
   if (loadError) {
@@ -128,8 +129,8 @@ export default function AnimalAdoptionsAdminPage() {
     <div className="max-w-4xl mx-auto space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-3xl font-bold">Edit Animal Adoptions Page</h1>
-        <Button onClick={handleSave} disabled={saveMutation.pending}>
-          {saveMutation.pending ? "Saving..." : "Save Changes"}
+        <Button onClick={handleSave} loading={saveMutation.pending}>
+          Save Changes
         </Button>
       </div>
 
@@ -313,8 +314,8 @@ export default function AnimalAdoptionsAdminPage() {
       </Card>
 
       <div className="flex justify-end">
-        <Button onClick={handleSave} disabled={saveMutation.pending} size="lg">
-          {saveMutation.pending ? "Saving..." : "Save All Changes"}
+        <Button onClick={handleSave} loading={saveMutation.pending} size="lg">
+          Save All Changes
         </Button>
       </div>
     </div>
diff --git a/src/app/admin/animal-registration/page.tsx b/src/app/admin/animal-registration/page.tsx
index eaec9e7..a52eb5b 100644
--- a/src/app/admin/animal-registration/page.tsx
+++ b/src/app/admin/animal-registration/page.tsx
@@ -12,6 +12,7 @@ import { useToast } from "@/hooks/use-toast";
 import { useMutation } from "@/hooks/use-mutation";
 import { useUnsavedChangesGuard } from "@/hooks/use-unsaved-changes";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { logError } from "@/lib/logger";
 import {
   AnimalRegistrationContent,
@@ -99,7 +100,7 @@ export default function AnimalRegistrationAdminPage() {
   };
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <AdminLoading label="registration content" />;
   }
 
   if (loadError) {
@@ -117,8 +118,8 @@ export default function AnimalRegistrationAdminPage() {
             here.
           </p>
         </div>
-        <Button onClick={handleSave} disabled={saveMutation.pending}>
-          {saveMutation.pending ? "Saving..." : "Save Changes"}
+        <Button onClick={handleSave} loading={saveMutation.pending}>
+          Save Changes
         </Button>
       </div>
 
@@ -229,8 +230,8 @@ export default function AnimalRegistrationAdminPage() {
       </Card>
 
       <div className="flex justify-end">
-        <Button onClick={handleSave} disabled={saveMutation.pending} size="lg">
-          {saveMutation.pending ? "Saving..." : "Save All Changes"}
+        <Button onClick={handleSave} loading={saveMutation.pending} size="lg">
+          Save All Changes
         </Button>
       </div>
     </div>
diff --git a/src/app/admin/animals/[id]/page.tsx b/src/app/admin/animals/[id]/page.tsx
index 316b001..22bd1da 100644
--- a/src/app/admin/animals/[id]/page.tsx
+++ b/src/app/admin/animals/[id]/page.tsx
@@ -90,6 +90,7 @@ import {
 import { ArrowLeft, Plus } from "lucide-react";
 import { logError } from "@/lib/logger";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 
 type DialogType =
   | "encounter"
@@ -163,7 +164,7 @@ export default function AnimalMedicalPage() {
   };
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <AdminLoading label="animal record" />;
   }
 
   if (loadError) {
@@ -825,10 +826,11 @@ export default function AnimalMedicalPage() {
               </div>
               <Button
                 className="w-full"
+                loading={savingLifecycle}
                 disabled={!lifecycleDialog.toStatus || savingLifecycle}
                 onClick={submitLifecycleTransition}
               >
-                {savingLifecycle ? "Saving…" : "Apply transition"}
+                Apply transition
               </Button>
             </div>
           )}
diff --git a/src/app/admin/animals/page.tsx b/src/app/admin/animals/page.tsx
index 637b910..bfa4e67 100644
--- a/src/app/admin/animals/page.tsx
+++ b/src/app/admin/animals/page.tsx
@@ -45,6 +45,7 @@ import { Plus, Pencil, Trash, Search } from "lucide-react";
 import { logError } from "@/lib/logger";
 import { ConfirmDialog } from "@/components/admin/confirm-dialog";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 
 const STERILIZATION_LABELS: Record<string, string> = {
   unknown: "Unknown",
@@ -469,12 +470,8 @@ export default function AnimalsManager() {
                   Enter a direct URL to the animal photo
                 </p>
               </div>
-              <Button onClick={handleSubmit} className="w-full" disabled={mutation.pending}>
-                {mutation.pending
-                  ? "Saving…"
-                  : editingAnimal
-                    ? "Update Animal"
-                    : "Add Animal"}
+              <Button onClick={handleSubmit} className="w-full" loading={mutation.pending}>
+                {editingAnimal ? "Update Animal" : "Add Animal"}
               </Button>
             </div>
           </DialogContent>
@@ -533,7 +530,7 @@ export default function AnimalsManager() {
         </CardHeader>
         <CardContent>
           {loading ? (
-            <div>Loading...</div>
+            <AdminLoading label="animals" rows={4} />
           ) : loadError ? (
             <LoadError label="animals" onRetry={loadAnimals} />
           ) : (
diff --git a/src/app/admin/chip-lookup/page.tsx b/src/app/admin/chip-lookup/page.tsx
index 1cf02b2..85f1369 100644
--- a/src/app/admin/chip-lookup/page.tsx
+++ b/src/app/admin/chip-lookup/page.tsx
@@ -142,6 +142,9 @@ function FoundScanForm({
   const [outcome, setOutcome] = useState("");
   const [notes, setNotes] = useState("");
   const [busy, setBusy] = useState(false);
+  // Which open case is being resolved — busy locks every control, but
+  // the spinner belongs on the row the operator actually clicked.
+  const [busyCaseId, setBusyCaseId] = useState<string | null>(null);
   const [resolving, setResolving] = useState<Record<string, string>>({});
 
   const saveNew = async () => {
@@ -191,6 +194,7 @@ function FoundScanForm({
     const chosen = resolving[openCase.id];
     if (!chosen) return;
     setBusy(true);
+    setBusyCaseId(openCase.id);
     try {
       const result = await resolveOpenCaseAction(
         openCase.id,
@@ -216,6 +220,7 @@ function FoundScanForm({
       });
     } finally {
       setBusy(false);
+      setBusyCaseId(null);
     }
   };
 
@@ -282,6 +287,7 @@ function FoundScanForm({
                   <Button
                     size="sm"
                     variant="outline"
+                    loading={busyCaseId === r.id}
                     disabled={busy || !resolving[r.id]}
                     onClick={() => resolve(r)}
                   >
@@ -323,6 +329,7 @@ function FoundScanForm({
         <Button
           size="sm"
           variant="outline"
+          loading={busy && busyCaseId === null}
           disabled={busy}
           onClick={saveNew}
         >
diff --git a/src/app/admin/communications/page.tsx b/src/app/admin/communications/page.tsx
index c503506..326dfc8 100644
--- a/src/app/admin/communications/page.tsx
+++ b/src/app/admin/communications/page.tsx
@@ -38,6 +38,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { useToast } from "@/hooks/use-toast";
 import { useMutation } from "@/hooks/use-mutation";
 import { logError } from "@/lib/logger";
@@ -148,7 +149,7 @@ function ExceptionActions({
           variant: "destructive",
         });
       }
-    });
+    }, "requeue");
 
   const setOptOut = (optedOut: boolean) =>
     mutation.run(async () => {
@@ -173,7 +174,7 @@ function ExceptionActions({
           variant: "destructive",
         });
       }
-    });
+    }, "optout");
 
   return (
     <div className="flex items-center justify-end gap-1">
@@ -182,6 +183,7 @@ function ExceptionActions({
           variant="outline"
           size="sm"
           onClick={requeue}
+          loading={mutation.pendingKey === "requeue"}
           disabled={mutation.pending}
           aria-label={`Requeue ${label}`}
         >
@@ -193,6 +195,7 @@ function ExceptionActions({
           variant="ghost"
           size="sm"
           onClick={() => setOptOut(!comm.optedOut)}
+          loading={mutation.pendingKey === "optout"}
           disabled={mutation.pending}
           aria-label={
             comm.optedOut
@@ -247,7 +250,7 @@ export default function CommunicationsPage() {
     });
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <AdminLoading label="communications" />;
   }
   if (loadError || !overview) {
     return <LoadError label="communications" onRetry={load} />;
@@ -280,10 +283,11 @@ export default function CommunicationsPage() {
           <Button
             variant="outline"
             onClick={runPreview}
-            disabled={dryRun.pending}
+            loading={dryRun.pending}
+            loadingText="Evaluating…"
           >
             <FlaskConical className="h-4 w-4 mr-2" />
-            {dryRun.pending ? "Evaluating…" : "Preview next reminder run"}
+            Preview next reminder run
           </Button>
           {preview && (
             <div className="mt-4 text-sm space-y-1" aria-live="polite">
diff --git a/src/app/admin/data-quality/merge-household/page.tsx b/src/app/admin/data-quality/merge-household/page.tsx
index 2da2f53..db606be 100644
--- a/src/app/admin/data-quality/merge-household/page.tsx
+++ b/src/app/admin/data-quality/merge-household/page.tsx
@@ -37,6 +37,7 @@ import {
 } from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
 import { logError } from "@/lib/logger";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { CircleAlert, GitMerge, TriangleAlert } from "lucide-react";
 
 function HouseholdCard({
@@ -195,7 +196,7 @@ function HouseholdMergeReview() {
       </Card>
     );
   }
-  if (!pair) return <p>Loading…</p>;
+  if (!pair) return <AdminLoading label="candidate pair" rows={2} />;
 
   return (
     <div className="space-y-6">
@@ -383,7 +384,7 @@ export default function HouseholdMergePage() {
           </Link>
         </p>
       </div>
-      <Suspense fallback={<p>Loading…</p>}>
+      <Suspense fallback={<AdminLoading label="candidate pair" rows={2} />}>
         <HouseholdMergeReview />
       </Suspense>
     </div>
diff --git a/src/app/admin/data-quality/merge-person/page.tsx b/src/app/admin/data-quality/merge-person/page.tsx
index a37325b..c6fb8c8 100644
--- a/src/app/admin/data-quality/merge-person/page.tsx
+++ b/src/app/admin/data-quality/merge-person/page.tsx
@@ -40,6 +40,7 @@ import {
 } from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
 import { logError } from "@/lib/logger";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { CircleAlert, GitMerge, KeyRound, TriangleAlert } from "lucide-react";
 
 function PersonCard({
@@ -216,7 +217,7 @@ function PersonMergeReview() {
       </Card>
     );
   }
-  if (!pair) return <p>Loading…</p>;
+  if (!pair) return <AdminLoading label="candidate pair" rows={2} />;
 
   return (
     <div className="space-y-6">
@@ -405,7 +406,7 @@ export default function PersonMergePage() {
           </Link>
         </p>
       </div>
-      <Suspense fallback={<p>Loading…</p>}>
+      <Suspense fallback={<AdminLoading label="candidate pair" rows={2} />}>
         <PersonMergeReview />
       </Suspense>
     </div>
diff --git a/src/app/admin/data-quality/merge/page.tsx b/src/app/admin/data-quality/merge/page.tsx
index d798ca4..290c4b1 100644
--- a/src/app/admin/data-quality/merge/page.tsx
+++ b/src/app/admin/data-quality/merge/page.tsx
@@ -41,6 +41,7 @@ import {
 } from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
 import { logError } from "@/lib/logger";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { CircleAlert, GitMerge, TriangleAlert } from "lucide-react";
 
 function AnimalCard({
@@ -211,7 +212,7 @@ function MergeReview() {
       </Card>
     );
   }
-  if (!pair) return <p>Loading…</p>;
+  if (!pair) return <AdminLoading label="candidate pair" rows={2} />;
 
   return (
     <div className="space-y-6">
@@ -417,7 +418,7 @@ export default function MergePage() {
           </Link>
         </p>
       </div>
-      <Suspense fallback={<p>Loading…</p>}>
+      <Suspense fallback={<AdminLoading label="candidate pair" rows={2} />}>
         <MergeReview />
       </Suspense>
     </div>
diff --git a/src/app/admin/data-quality/page.tsx b/src/app/admin/data-quality/page.tsx
index d387a74..fce21c6 100644
--- a/src/app/admin/data-quality/page.tsx
+++ b/src/app/admin/data-quality/page.tsx
@@ -38,6 +38,7 @@ import {
 } from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
 import { logError } from "@/lib/logger";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import {
   CheckCheck,
   CircleAlert,
@@ -245,7 +246,9 @@ export default function DataQualityPage() {
         </CardContent>
       </Card>
 
-      {findings === null && !loadError && <p>Loading…</p>}
+      {findings === null && !loadError && (
+        <AdminLoading label="data-quality findings" rows={2} />
+      )}
       {loadError && (
         <Card>
           <CardContent className="pt-6">
diff --git a/src/app/admin/faq/page.tsx b/src/app/admin/faq/page.tsx
index 48fd801..3fad084 100644
--- a/src/app/admin/faq/page.tsx
+++ b/src/app/admin/faq/page.tsx
@@ -16,6 +16,7 @@ import { Plus, Pencil, Trash, GripVertical } from "lucide-react";
 import { logError } from "@/lib/logger";
 import { ConfirmDialog } from "@/components/admin/confirm-dialog";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 
 interface FAQ {
   id: string;
@@ -210,7 +211,11 @@ export default function FAQManager() {
   }, {} as Record<string, FAQ[]>);
 
   if (loading) {
-    return <div className="p-8">Loading...</div>;
+    return (
+      <div className="p-8">
+        <AdminLoading label="FAQs" />
+      </div>
+    );
   }
 
   if (loadError) {
@@ -317,8 +322,8 @@ export default function FAQManager() {
                   </p>
                 )}
               </div>
-              <Button onClick={handleSubmit} className="w-full" disabled={mutation.pending}>
-                {mutation.pending ? "Saving…" : editingFaq ? "Update FAQ" : "Add FAQ"}
+              <Button onClick={handleSubmit} className="w-full" loading={mutation.pending}>
+                {editingFaq ? "Update FAQ" : "Add FAQ"}
               </Button>
             </div>
           </DialogContent>
diff --git a/src/app/admin/homepage/page.tsx b/src/app/admin/homepage/page.tsx
index 732656b..5ce6103 100644
--- a/src/app/admin/homepage/page.tsx
+++ b/src/app/admin/homepage/page.tsx
@@ -12,6 +12,7 @@ import { useToast } from "@/hooks/use-toast";
 import { useMutation } from "@/hooks/use-mutation";
 import { useUnsavedChangesGuard } from "@/hooks/use-unsaved-changes";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { saveHomepageData, loadHomepageData } from "./actions";
 import { logError } from "@/lib/logger";
 
@@ -128,7 +129,7 @@ export default function HomepageEditor() {
   };
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <AdminLoading label="homepage content" />;
   }
 
   if (loadError) {
@@ -139,8 +140,8 @@ export default function HomepageEditor() {
     <div className="max-w-4xl mx-auto space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-3xl font-bold">Edit Homepage</h1>
-        <Button onClick={handleSave} disabled={saveMutation.pending}>
-          {saveMutation.pending ? "Saving..." : "Save Changes"}
+        <Button onClick={handleSave} loading={saveMutation.pending}>
+          Save Changes
         </Button>
       </div>
 
@@ -365,8 +366,8 @@ export default function HomepageEditor() {
       </Card>
 
       <div className="flex justify-end">
-        <Button onClick={handleSave} disabled={saveMutation.pending} size="lg">
-          {saveMutation.pending ? "Saving..." : "Save All Changes"}
+        <Button onClick={handleSave} loading={saveMutation.pending} size="lg">
+          Save All Changes
         </Button>
       </div>
     </div>
diff --git a/src/app/admin/lost-found/[id]/page.tsx b/src/app/admin/lost-found/[id]/page.tsx
index f7dd80e..e0bb4e5 100644
--- a/src/app/admin/lost-found/[id]/page.tsx
+++ b/src/app/admin/lost-found/[id]/page.tsx
@@ -60,6 +60,7 @@ import type {
 import { todayIsoDate } from "@/lib/vaccinations";
 import { logError } from "@/lib/logger";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { ArrowLeft, PawPrint } from "lucide-react";
 
 function OwnerBlock({ owner }: { owner: AnimalOwnerContacts }) {
@@ -219,7 +220,7 @@ export default function LostFoundCasePage() {
     return <LoadError label="case" onRetry={load} />;
   }
   if (!detail && !notFound) {
-    return <div>Loading...</div>;
+    return <AdminLoading label="case details" />;
   }
   if (notFound || !detail) {
     return (
diff --git a/src/app/admin/lost-found/page.tsx b/src/app/admin/lost-found/page.tsx
index 4adbd15..4260400 100644
--- a/src/app/admin/lost-found/page.tsx
+++ b/src/app/admin/lost-found/page.tsx
@@ -40,6 +40,7 @@ import type { LostFoundOutcome } from "@/lib/lost-found";
 import { todayIsoDate } from "@/lib/vaccinations";
 import { logError } from "@/lib/logger";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { Plus } from "lucide-react";
 
 function CaseRow({ c }: { c: LostFoundCaseRecord }) {
@@ -201,7 +202,7 @@ export default function LostFoundWorkspacePage() {
     return <LoadError label="lost/found cases" onRetry={load} />;
   }
   if (!data) {
-    return <div>Loading...</div>;
+    return <AdminLoading label="lost and found cases" />;
   }
 
   return (
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 7a3a562..0f30891 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -34,6 +34,7 @@ import {
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   ArrowRight,
   CircleCheck,
@@ -63,7 +64,7 @@ function WorkItemRow({ item }: { item: DashboardWorkItem }) {
     <li>
       <Link
         href={item.href}
-        className="flex items-center gap-3 py-3 px-2 -mx-2 rounded-md hover:bg-muted/50 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring group"
+        className="flex items-center gap-3 py-3 px-2 -mx-2 rounded-md transition-colors duration-fast hover:bg-muted/50 active:bg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring group"
         aria-label={`${item.label} — ${DASHBOARD_URGENCY_LABELS[item.urgency]}. Open the ${item.domain} queue.`}
       >
         <span className="text-2xl font-bold tabular-nums w-10 text-center shrink-0">
@@ -85,7 +86,7 @@ function FailureRow({ failure }: { failure: DashboardFailure }) {
     <li>
       <Link
         href={failure.href}
-        className="flex items-center gap-3 py-3 px-2 -mx-2 rounded-md hover:bg-muted/50 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+        className="flex items-center gap-3 py-3 px-2 -mx-2 rounded-md transition-colors duration-fast hover:bg-muted/50 active:bg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
       >
         <CircleAlert
           className="h-5 w-5 text-amber-600 shrink-0"
@@ -201,8 +202,15 @@ async function WorkQueues({ role }: { role: "admin" | "editor" }) {
 }
 
 function WorkQueuesFallback() {
+  // Skeleton rows match the real list shape so the dashboard doesn't
+  // reflow when the queues land (#280).
   return (
-    <section aria-labelledby="needs-attention-heading" className="mb-8">
+    <section
+      aria-labelledby="needs-attention-heading"
+      className="mb-8"
+      role="status"
+    >
+      <span className="sr-only">Loading work queues…</span>
       <h2
         id="needs-attention-heading"
         className="text-xl font-semibold mb-3"
@@ -210,8 +218,17 @@ function WorkQueuesFallback() {
         Needs attention
       </h2>
       <Card>
-        <CardContent className="py-6 text-sm text-muted-foreground">
-          Loading work queues…
+        <CardContent className="py-2 space-y-1">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="flex items-center gap-3 py-3">
+              <Skeleton className="h-7 w-10 shrink-0" />
+              <div className="min-w-0 flex-1 space-y-1.5">
+                <Skeleton className="h-4 w-48" />
+                <Skeleton className="h-3 w-24" />
+              </div>
+              <Skeleton className="h-5 w-20 rounded-full" />
+            </div>
+          ))}
         </CardContent>
       </Card>
     </section>
diff --git a/src/app/admin/persons/page.tsx b/src/app/admin/persons/page.tsx
index bdd1552..c917c9d 100644
--- a/src/app/admin/persons/page.tsx
+++ b/src/app/admin/persons/page.tsx
@@ -34,6 +34,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   getPersonDetailAction,
   getPersonsDataAction,
@@ -51,6 +52,7 @@ import type {
 } from "@/lib/registry/persons";
 import { logError } from "@/lib/logger";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { Plus } from "lucide-react";
 
 function PersonForm({
@@ -158,7 +160,15 @@ function PersonDetailView({
       .catch((e) => logError("owners", "person-detail", e));
   }, [personId]);
 
-  if (!detail) return <p className="text-sm text-muted-foreground">Loading…</p>;
+  if (!detail)
+    return (
+      <div role="status" className="space-y-2">
+        <span className="sr-only">Loading person details…</span>
+        <Skeleton className="h-4 w-48" />
+        <Skeleton className="h-4 w-64" />
+        <Skeleton className="h-4 w-40" />
+      </div>
+    );
 
   const merged = detail.merge?.status === "merged";
 
@@ -279,7 +289,7 @@ export default function PersonsPage() {
     load();
   }, []);
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <AdminLoading label="people" />;
   if (loadError || !data) return <LoadError label="people" onRetry={load} />;
 
   const q = query.trim().toLowerCase();
diff --git a/src/app/admin/registrations/page.tsx b/src/app/admin/registrations/page.tsx
index 5019f2d..34c6998 100644
--- a/src/app/admin/registrations/page.tsx
+++ b/src/app/admin/registrations/page.tsx
@@ -30,6 +30,7 @@ import { Badge } from "@/components/ui/badge";
 import { useToast } from "@/hooks/use-toast";
 import { useMutation } from "@/hooks/use-mutation";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { AnimalRegistration } from "@/lib/types";
 import { Eye, CircleCheckBig, Download, CircleX, RotateCcw, Link2, Shield } from "lucide-react";
 import {
@@ -145,7 +146,7 @@ export default function RegistrationsPage() {
           variant: "destructive",
         });
       }
-    }, `status-${id}`);
+    }, `status-${id}-${status}`);
   };
 
   const handleViewReceipt = (registration: AnimalRegistration) => {
@@ -363,11 +364,15 @@ export default function RegistrationsPage() {
           variant: "destructive",
         });
       }
-    }, `link-${linking.id}`);
+    }, `link-${linking.id}-${animalId}`);
   };
 
   if (loading) {
-    return <div className="p-8">Loading...</div>;
+    return (
+      <div className="p-8">
+        <AdminLoading label="registrations" />
+      </div>
+    );
   }
 
   if (loadError) {
@@ -483,6 +488,7 @@ export default function RegistrationsPage() {
                     <TableCell>
                       <Button
                         size="sm"
+                        loading={mutation.pendingKey === `register-${a.animalId}`}
                         disabled={mutation.pending}
                         onClick={() => registerAnimal(a.animalId)}
                       >
@@ -809,6 +815,10 @@ export default function RegistrationsPage() {
                           registration.status !== "rejected" && (
                             <Button
                               size="sm"
+                              loading={
+                                mutation.pendingKey ===
+                                `register-portal-${registration.id}`
+                              }
                               disabled={mutation.pending}
                               onClick={() =>
                                 registerPortalRequest(registration)
@@ -837,6 +847,7 @@ export default function RegistrationsPage() {
                             variant="outline"
                             size="sm"
                             aria-label="View payment receipt"
+                            loading={mutation.pendingKey === `receipt-${registration.id}`}
                             disabled={mutation.pending}
                             onClick={() => handleViewReceipt(registration)}
                           >
@@ -848,6 +859,7 @@ export default function RegistrationsPage() {
                             <Button
                               size="sm"
                               aria-label="Verify registration"
+                              loading={mutation.pendingKey === `status-${registration.id}-approved`}
                               disabled={mutation.pending}
                               onClick={() => setStatus(registration.id, "approved")}
                             >
@@ -857,6 +869,7 @@ export default function RegistrationsPage() {
                               variant="destructive"
                               size="sm"
                               aria-label="Reject registration"
+                              loading={mutation.pendingKey === `status-${registration.id}-rejected`}
                               disabled={mutation.pending}
                               onClick={() => setStatus(registration.id, "rejected")}
                             >
@@ -869,6 +882,7 @@ export default function RegistrationsPage() {
                             variant="outline"
                             size="sm"
                             aria-label="Reopen registration as pending"
+                            loading={mutation.pendingKey === `status-${registration.id}-pending`}
                             disabled={mutation.pending}
                             onClick={() => setStatus(registration.id, "pending")}
                           >
@@ -926,6 +940,7 @@ export default function RegistrationsPage() {
                   <Button
                     variant="outline"
                     onClick={runLinkSearch}
+                    loading={linkSearching}
                     disabled={linkSearching}
                   >
                     Search
@@ -952,6 +967,7 @@ export default function RegistrationsPage() {
                       </div>
                       <Button
                         size="sm"
+                        loading={mutation.pendingKey === `link-${linking.id}-${hit.animal.id}`}
                         disabled={mutation.pending}
                         onClick={() => linkSubmission(hit.animal.id)}
                       >
@@ -1043,13 +1059,12 @@ export default function RegistrationsPage() {
                     <Button
                       variant="outline"
                       size="sm"
+                      loading={mutation.pendingKey === `receipt-${selected.id}`}
                       disabled={mutation.pending}
                       onClick={() => handleViewReceipt(selected)}
                     >
                       <Download className="h-4 w-4 mr-2" />
-                      {mutation.pendingKey === `receipt-${selected.id}`
-                        ? "Loading…"
-                        : "View Receipt"}
+                      View Receipt
                     </Button>
                   )}
                 </div>
@@ -1077,6 +1092,7 @@ export default function RegistrationsPage() {
                       <Button
                         variant="outline"
                         size="sm"
+                        loading={mutation.pendingKey === `hold-release-${selected.id}`}
                         disabled={mutation.pending}
                         onClick={() => releaseHold(selected)}
                       >
@@ -1093,6 +1109,7 @@ export default function RegistrationsPage() {
                       <Button
                         variant="outline"
                         size="sm"
+                        loading={mutation.pendingKey === `hold-${selected.id}`}
                         disabled={mutation.pending}
                         onClick={() => applyHold(selected)}
                       >
diff --git a/src/app/admin/requests/page.tsx b/src/app/admin/requests/page.tsx
index 63cdcb1..977043c 100644
--- a/src/app/admin/requests/page.tsx
+++ b/src/app/admin/requests/page.tsx
@@ -37,6 +37,7 @@ import { OWNER_REQUEST_KIND_LABELS } from "@/lib/registry/owner-request-kinds";
 import type { HouseholdRecord, PersonRecord } from "@/lib/registry/persons";
 import { logError } from "@/lib/logger";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 
 type ResolveDecision = "approved" | "rejected";
 
@@ -318,7 +319,7 @@ export default function OwnerRequestsPage() {
     load();
   }, []);
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <AdminLoading label="requests" />;
   if (loadError || !data) {
     return <LoadError label="owner requests" onRetry={load} />;
   }
diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
index 2106458..c4cb491 100644
--- a/src/app/admin/settings/page.tsx
+++ b/src/app/admin/settings/page.tsx
@@ -13,6 +13,7 @@ import { useToast } from "@/hooks/use-toast";
 import { useMutation } from "@/hooks/use-mutation";
 import { useUnsavedChangesGuard } from "@/hooks/use-unsaved-changes";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { logError } from "@/lib/logger";
 import { safeEmbedUrl } from "@/lib/url-safety";
 
@@ -99,7 +100,7 @@ export default function SettingsPage() {
   };
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <AdminLoading label="settings" />;
   }
 
   if (loadError) {
@@ -110,8 +111,8 @@ export default function SettingsPage() {
     <div className="max-w-4xl mx-auto space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-3xl font-bold">Site Settings</h1>
-        <Button onClick={handleSave} disabled={saveMutation.pending}>
-          {saveMutation.pending ? "Saving..." : "Save Changes"}
+        <Button onClick={handleSave} loading={saveMutation.pending}>
+          Save Changes
         </Button>
       </div>
 
@@ -272,8 +273,8 @@ export default function SettingsPage() {
       </Card>
 
       <div className="flex justify-end">
-        <Button onClick={handleSave} disabled={saveMutation.pending} size="lg">
-          {saveMutation.pending ? "Saving..." : "Save All Changes"}
+        <Button onClick={handleSave} loading={saveMutation.pending} size="lg">
+          Save All Changes
         </Button>
       </div>
     </div>
diff --git a/src/app/admin/vet/page.tsx b/src/app/admin/vet/page.tsx
index a1b9e3c..f906a7d 100644
--- a/src/app/admin/vet/page.tsx
+++ b/src/app/admin/vet/page.tsx
@@ -46,6 +46,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { logError } from "@/lib/logger";
 
 type KindFilter = "all" | VetQueueItem["kind"];
@@ -238,7 +239,7 @@ export default function VetQueuePage() {
   }, [loadQueue]);
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <AdminLoading label="vet queue" />;
   }
   if (loadError) {
     return <LoadError label="veterinary queue" onRetry={loadQueue} />;
diff --git a/src/app/admin/veterinary-services/page.tsx b/src/app/admin/veterinary-services/page.tsx
index 8c786e7..7f55e46 100644
--- a/src/app/admin/veterinary-services/page.tsx
+++ b/src/app/admin/veterinary-services/page.tsx
@@ -12,6 +12,7 @@ import { useToast } from "@/hooks/use-toast";
 import { useMutation } from "@/hooks/use-mutation";
 import { useUnsavedChangesGuard } from "@/hooks/use-unsaved-changes";
 import { LoadError } from "@/components/admin/load-error";
+import { AdminLoading } from "@/components/admin/admin-loading";
 import { logError } from "@/lib/logger";
 
 interface VetService {
@@ -116,7 +117,7 @@ export default function VetServicesAdminPage() {
   };
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <AdminLoading label="veterinary services content" />;
   }
 
   if (loadError) {
@@ -127,8 +128,8 @@ export default function VetServicesAdminPage() {
     <div className="max-w-4xl mx-auto space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-3xl font-bold">Edit Veterinary Services Page</h1>
-        <Button onClick={handleSave} disabled={saveMutation.pending}>
-          {saveMutation.pending ? "Saving..." : "Save Changes"}
+        <Button onClick={handleSave} loading={saveMutation.pending}>
+          Save Changes
         </Button>
       </div>
 
@@ -233,8 +234,8 @@ export default function VetServicesAdminPage() {
       </Card>
 
       <div className="flex justify-end">
-        <Button onClick={handleSave} disabled={saveMutation.pending} size="lg">
-          {saveMutation.pending ? "Saving..." : "Save All Changes"}
+        <Button onClick={handleSave} loading={saveMutation.pending} size="lg">
+          Save All Changes
         </Button>
       </div>
     </div>
diff --git a/src/app/portal/portal-client.tsx b/src/app/portal/portal-client.tsx
index 3b8fe5e..5c0ed38 100644
--- a/src/app/portal/portal-client.tsx
+++ b/src/app/portal/portal-client.tsx
@@ -107,6 +107,12 @@ export function AnimalCard({
   const [requestNote, setRequestNote] = useState("");
   const [receiptFile, setReceiptFile] = useState<File | null>(null);
   const [receiptError, setReceiptError] = useState<string | null>(null);
+  // Which action is in flight — pending already locks every control,
+  // but the spinner belongs on the button the owner actually pressed
+  // (#280).
+  const [busyAction, setBusyAction] = useState<
+    "confirm" | "report" | "missing" | "request" | null
+  >(null);
   const [reportKind, setReportKind] = useState<OwnerRequestKind | "">("");
   const [detail, setDetail] = useState("");
   const [targetName, setTargetName] = useState("");
@@ -135,121 +141,141 @@ export function AnimalCard({
       );
       return;
     }
+    setBusyAction("request");
     startTransition(async () => {
-      const submissionId = crypto.randomUUID();
-      const result = await requestRegistrationAction({
-        ownershipId: animal.ownershipId,
-        submissionId,
-        note: requestNote || undefined,
-        wantsReceipt: receiptFile !== null,
-      });
-      if (!result.ok) {
-        toast({
-          title: "Couldn't submit the request",
-          description: result.error,
-          variant: "destructive",
+      try {
+        const submissionId = crypto.randomUUID();
+        const result = await requestRegistrationAction({
+          ownershipId: animal.ownershipId,
+          submissionId,
+          note: requestNote || undefined,
+          wantsReceipt: receiptFile !== null,
         });
-        return;
-      }
-      let receiptDelivered = true;
-      if (receiptFile) {
-        try {
-          const upload = await fetch(`/api/receipts/${submissionId}`, {
-            method: "POST",
-            headers: { "Content-Type": receiptFile.type },
-            body: receiptFile,
+        if (!result.ok) {
+          toast({
+            title: "Couldn't submit the request",
+            description: result.error,
+            variant: "destructive",
           });
-          if (!upload.ok) {
-            if (upload.status !== 429) {
-              logError(
-                "registration",
-                "receipt-upload",
-                new Error(`upload ${upload.status}`),
-              );
+          return;
+        }
+        let receiptDelivered = true;
+        if (receiptFile) {
+          try {
+            const upload = await fetch(`/api/receipts/${submissionId}`, {
+              method: "POST",
+              headers: { "Content-Type": receiptFile.type },
+              body: receiptFile,
+            });
+            if (!upload.ok) {
+              if (upload.status !== 429) {
+                logError(
+                  "registration",
+                  "receipt-upload",
+                  new Error(`upload ${upload.status}`),
+                );
+              }
+              receiptDelivered = false;
             }
+          } catch (uploadError) {
             receiptDelivered = false;
+            logError("registration", "receipt-upload", uploadError);
           }
-        } catch (uploadError) {
-          receiptDelivered = false;
-          logError("registration", "receipt-upload", uploadError);
         }
+        toast({
+          title: "Request submitted",
+          description:
+            receiptFile && !receiptDelivered
+              ? `Your ${animal.registrationYear} request went through, but the receipt could not be uploaded — staff can still review the request.`
+              : `SFPCA staff will review your ${animal.registrationYear} request for ${animal.name}.`,
+        });
+        setRequestOpen(false);
+        setRequestNote("");
+        setReceiptFile(null);
+        setReceiptError(null);
+      } finally {
+        setBusyAction(null);
       }
-      toast({
-        title: "Request submitted",
-        description:
-          receiptFile && !receiptDelivered
-            ? `Your ${animal.registrationYear} request went through, but the receipt could not be uploaded — staff can still review the request.`
-            : `SFPCA staff will review your ${animal.registrationYear} request for ${animal.name}.`,
-      });
-      setRequestOpen(false);
-      setRequestNote("");
-      setReceiptFile(null);
-      setReceiptError(null);
     });
   };
 
   const confirm = () => {
+    setBusyAction("confirm");
     startTransition(async () => {
-      const result = await confirmAnimalAction(animal.ownershipId);
-      toast({
-        title: result.ok ? "Confirmed" : "Couldn't confirm",
-        description: result.ok
-          ? `Thanks — ${animal.name} is confirmed as still living on Saba with you.`
-          : result.error,
-        variant: result.ok ? "default" : "destructive",
-      });
+      try {
+        const result = await confirmAnimalAction(animal.ownershipId);
+        toast({
+          title: result.ok ? "Confirmed" : "Couldn't confirm",
+          description: result.ok
+            ? `Thanks — ${animal.name} is confirmed as still living on Saba with you.`
+            : result.error,
+          variant: result.ok ? "default" : "destructive",
+        });
+      } finally {
+        setBusyAction(null);
+      }
     });
   };
 
   const submitReport = () => {
     if (!reportKind) return;
+    setBusyAction("report");
     startTransition(async () => {
-      const result = await submitOwnerReportAction({
-        ownershipId: animal.ownershipId,
-        kind: reportKind,
-        detail: detail || undefined,
-        targetName: targetName || undefined,
-        targetContact: targetContact || undefined,
-        effectiveOn: effectiveOn || undefined,
-      });
-      toast({
-        title: result.ok ? "Request submitted" : "Couldn't submit",
-        description: result.ok
-          ? "Staff will review your report and follow up if needed."
-          : result.error,
-        variant: result.ok ? "default" : "destructive",
-      });
-      if (result.ok) {
-        setReportKind("");
-        setDetail("");
-        setTargetName("");
-        setTargetContact("");
-        setEffectiveOn("");
+      try {
+        const result = await submitOwnerReportAction({
+          ownershipId: animal.ownershipId,
+          kind: reportKind,
+          detail: detail || undefined,
+          targetName: targetName || undefined,
+          targetContact: targetContact || undefined,
+          effectiveOn: effectiveOn || undefined,
+        });
+        toast({
+          title: result.ok ? "Request submitted" : "Couldn't submit",
+          description: result.ok
+            ? "Staff will review your report and follow up if needed."
+            : result.error,
+          variant: result.ok ? "default" : "destructive",
+        });
+        if (result.ok) {
+          setReportKind("");
+          setDetail("");
+          setTargetName("");
+          setTargetContact("");
+          setEffectiveOn("");
+        }
+      } finally {
+        setBusyAction(null);
       }
     });
   };
 
   const reportMissing = () => {
+    setBusyAction("missing");
     startTransition(async () => {
-      const result = await reportMissingAction({
-        ownershipId: animal.ownershipId,
-        lastSeenLocation: missingLocation || undefined,
-        detail: missingDetail || undefined,
-      });
-      if (result.ok) {
-        setMissingReported(true);
-        setMissingOpen(false);
-        toast({
-          title: "Missing report sent",
-          description:
-            "SFPCA staff have been notified and will start looking. We'll contact you if the animal is found.",
-        });
-      } else {
-        toast({
-          title: "Couldn't send the report",
-          description: result.error,
-          variant: "destructive",
+      try {
+        const result = await reportMissingAction({
+          ownershipId: animal.ownershipId,
+          lastSeenLocation: missingLocation || undefined,
+          detail: missingDetail || undefined,
         });
+        if (result.ok) {
+          setMissingReported(true);
+          setMissingOpen(false);
+          toast({
+            title: "Missing report sent",
+            description:
+              "SFPCA staff have been notified and will start looking. We'll contact you if the animal is found.",
+          });
+        } else {
+          toast({
+            title: "Couldn't send the report",
+            description: result.error,
+            variant: "destructive",
+          });
+        }
+      } finally {
+        setBusyAction(null);
       }
     });
   };
@@ -334,7 +360,12 @@ export function AnimalCard({
               Confirms {animal.name} still lives on Saba with you.
             </p>
             {animal.confirmationDue && (
-              <Button size="sm" onClick={confirm} disabled={pending}>
+              <Button
+                size="sm"
+                onClick={confirm}
+                loading={busyAction === "confirm"}
+                disabled={pending}
+              >
                 Confirm still living on Saba with me
               </Button>
             )}
@@ -492,7 +523,7 @@ export function AnimalCard({
         </div>
 
         {missingOpen && (
-          <div className="border rounded-md p-3 space-y-3 text-sm">
+          <div className="animate-in fade-in-0 slide-in-from-top-1 duration-ui border rounded-md p-3 space-y-3 text-sm">
             <p className="font-medium">Report {animal.name} missing</p>
             <div className="space-y-1">
               <Label htmlFor={`missing-where-${animal.ownershipId}`}>
@@ -518,7 +549,12 @@ export function AnimalCard({
               />
             </div>
             <div className="flex gap-2">
-              <Button size="sm" onClick={reportMissing} disabled={pending}>
+              <Button
+                size="sm"
+                onClick={reportMissing}
+                loading={busyAction === "missing"}
+                disabled={pending}
+              >
                 Send missing report
               </Button>
               <Button
@@ -538,7 +574,7 @@ export function AnimalCard({
         )}
 
         {reportKind && (
-          <div className="border rounded-md p-3 space-y-3 text-sm">
+          <div className="animate-in fade-in-0 slide-in-from-top-1 duration-ui border rounded-md p-3 space-y-3 text-sm">
             <p className="font-medium">{OWNER_REQUEST_KIND_LABELS[reportKind]}</p>
             {reportKind === "transfer" && (
               <div className="grid gap-2 sm:grid-cols-2">
@@ -591,7 +627,12 @@ export function AnimalCard({
               />
             </div>
             <div className="flex gap-2">
-              <Button size="sm" onClick={submitReport} disabled={pending}>
+              <Button
+                size="sm"
+                onClick={submitReport}
+                loading={busyAction === "report"}
+                disabled={pending}
+              >
                 Submit request
               </Button>
               <Button
@@ -691,7 +732,12 @@ export function AnimalCard({
                 )}
               </div>
               <div className="flex gap-2">
-                <Button size="sm" onClick={submitRequest} disabled={pending}>
+                <Button
+                  size="sm"
+                  onClick={submitRequest}
+                  loading={busyAction === "request"}
+                  disabled={pending}
+                >
                   Submit request
                 </Button>
                 <Button
@@ -731,6 +777,7 @@ export function PortalClient({
 }) {
   const { toast } = useToast();
   const [pending, startTransition] = useTransition();
+  const [busyAction, setBusyAction] = useState<string | null>(null);
   const [fullName, setFullName] = useState(person.fullName);
   const [email, setEmail] = useState(person.email ?? "");
   const [phone, setPhone] = useState(person.phone ?? "");
@@ -738,30 +785,40 @@ export function PortalClient({
   const [channel, setChannel] = useState(person.preferredChannel ?? "");
 
   const saveProfile = () => {
+    setBusyAction("profile");
     startTransition(async () => {
-      const result = await updateOwnerProfileAction({
-        fullName,
-        email: email || null,
-        phone: phone || null,
-        address: address || null,
-        preferredChannel: channel || null,
-      });
-      toast({
-        title: result.ok ? "Profile saved" : "Couldn't save",
-        description: result.ok ? undefined : result.error,
-        variant: result.ok ? "default" : "destructive",
-      });
+      try {
+        const result = await updateOwnerProfileAction({
+          fullName,
+          email: email || null,
+          phone: phone || null,
+          address: address || null,
+          preferredChannel: channel || null,
+        });
+        toast({
+          title: result.ok ? "Profile saved" : "Couldn't save",
+          description: result.ok ? undefined : result.error,
+          variant: result.ok ? "default" : "destructive",
+        });
+      } finally {
+        setBusyAction(null);
+      }
     });
   };
 
   const cancelRequest = (requestId: string) => {
+    setBusyAction(`withdraw-${requestId}`);
     startTransition(async () => {
-      const result = await cancelOwnerRequestAction(requestId);
-      toast({
-        title: result.ok ? "Request cancelled" : "Couldn't cancel",
-        description: result.ok ? undefined : result.error,
-        variant: result.ok ? "default" : "destructive",
-      });
+      try {
+        const result = await cancelOwnerRequestAction(requestId);
+        toast({
+          title: result.ok ? "Request cancelled" : "Couldn't cancel",
+          description: result.ok ? undefined : result.error,
+          variant: result.ok ? "default" : "destructive",
+        });
+      } finally {
+        setBusyAction(null);
+      }
     });
   };
 
@@ -880,6 +937,7 @@ export function PortalClient({
                         size="sm"
                         variant="ghost"
                         onClick={() => cancelRequest(r.id)}
+                        loading={busyAction === `withdraw-${r.id}`}
                         disabled={pending}
                       >
                         Withdraw
@@ -979,7 +1037,11 @@ export function PortalClient({
                 onChange={(e) => setAddress(e.target.value)}
               />
             </div>
-            <Button onClick={saveProfile} disabled={pending}>
+            <Button
+              onClick={saveProfile}
+              loading={busyAction === "profile"}
+              disabled={pending}
+            >
               Save details
             </Button>
           </CardContent>
diff --git a/src/app/portal/portal-sign-out.tsx b/src/app/portal/portal-sign-out.tsx
index 700e4f7..9c06e7f 100644
--- a/src/app/portal/portal-sign-out.tsx
+++ b/src/app/portal/portal-sign-out.tsx
@@ -21,7 +21,7 @@ export function PortalSignOut() {
   };
 
   return (
-    <Button variant="outline" size="sm" onClick={handleSignOut} disabled={signingOut}>
+    <Button variant="outline" size="sm" onClick={handleSignOut} loading={signingOut} disabled={signingOut}>
       <LogOut className="h-4 w-4 mr-2" />
       Sign out
     </Button>
diff --git a/src/components/admin/admin-loading.tsx b/src/components/admin/admin-loading.tsx
new file mode 100644
index 0000000..e5a2014
--- /dev/null
+++ b/src/components/admin/admin-loading.tsx
@@ -0,0 +1,31 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+// Shared admin loading state (#280). Replaces bare `Loading...`
+// divs — which announced nothing to screen readers and yanked the
+// layout when content arrived — with a status-announced skeleton that
+// roughly matches a page: title line, a wide card, then row lines.
+// The pulse is motion-safe only (see Skeleton).
+export function AdminLoading({
+  label,
+  rows = 3,
+  className,
+}: {
+  // What is loading — announced to assistive tech as
+  // "Loading <label>…". Defaults to a generic announcement.
+  label?: string;
+  rows?: number;
+  className?: string;
+}) {
+  return (
+    <div role="status" className={cn("max-w-4xl space-y-4", className)}>
+      <span className="sr-only">Loading{label ? ` ${label}` : ""}…</span>
+      <Skeleton className="h-8 w-48" />
+      <Skeleton className="h-32 w-full" />
+      {rows > 0 &&
+        Array.from({ length: rows }).map((_, i) => (
+          <Skeleton key={i} className="h-12 w-full" />
+        ))}
+    </div>
+  );
+}
diff --git a/src/components/admin/admin-shell.tsx b/src/components/admin/admin-shell.tsx
index f33c4b9..e30bf3a 100644
--- a/src/components/admin/admin-shell.tsx
+++ b/src/components/admin/admin-shell.tsx
@@ -126,10 +126,10 @@ function NavSectionList({ onNavigate }: { onNavigate?: () => void }) {
                     aria-current={active ? "page" : undefined}
                     onClick={onNavigate}
                     className={cn(
-                      "flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                      "flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-fast",
                       active
-                        ? "bg-primary text-primary-foreground"
-                        : "text-foreground/80 hover:bg-accent hover:text-foreground",
+                        ? "bg-primary text-primary-foreground shadow-sm"
+                        : "text-foreground/80 hover:bg-accent hover:text-foreground active:bg-accent/70",
                     )}
                   >
                     <item.icon className="h-4 w-4 shrink-0" />
@@ -179,7 +179,7 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
           <Link
             href="/"
             target="_blank"
-            className="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
+            className="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-foreground/80 transition-colors duration-fast hover:bg-accent hover:text-foreground active:bg-accent/70"
           >
             <SquareArrowOutUpRight className="h-4 w-4 shrink-0" />
             View Site
@@ -191,11 +191,12 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
           <Button
             variant="ghost"
             onClick={handleLogout}
-            disabled={loggingOut}
+            loading={loggingOut}
+            loadingText="Logging out…"
             className="w-full justify-start gap-2.5 px-3 text-foreground/80 hover:text-foreground"
           >
             <LogOut className="h-4 w-4 shrink-0" />
-            {loggingOut ? "Logging out…" : "Logout"}
+            Logout
           </Button>
         </div>
       </aside>
@@ -238,7 +239,7 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
                 <Link
                   href="/"
                   target="_blank"
-                  className="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
+                  className="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-foreground/80 transition-colors duration-fast hover:bg-accent hover:text-foreground active:bg-accent/70"
                 >
                   <SquareArrowOutUpRight className="h-4 w-4 shrink-0" />
                   View Site
@@ -246,11 +247,12 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
                 <Button
                   variant="ghost"
                   onClick={handleLogout}
-                  disabled={loggingOut}
+                  loading={loggingOut}
+                  loadingText="Logging out…"
                   className="w-full justify-start gap-2.5 px-3 text-foreground/80 hover:text-foreground"
                 >
                   <LogOut className="h-4 w-4 shrink-0" />
-                  {loggingOut ? "Logging out…" : "Logout"}
+                  Logout
                 </Button>
               </div>
             </DialogPrimitive.Content>
@@ -268,7 +270,7 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
             variant="ghost"
             size="sm"
             onClick={handleLogout}
-            disabled={loggingOut}
+            loading={loggingOut}
             aria-label="Log out"
           >
             <LogOut className="h-4 w-4" />
diff --git a/src/components/admin/confirm-dialog.tsx b/src/components/admin/confirm-dialog.tsx
index a392ce7..eee1958 100644
--- a/src/components/admin/confirm-dialog.tsx
+++ b/src/components/admin/confirm-dialog.tsx
@@ -60,8 +60,13 @@ export function ConfirmDialog({
           >
             Cancel
           </Button>
-          <Button variant="destructive" onClick={onConfirm} disabled={pending}>
-            {pending ? pendingLabel : confirmLabel}
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            loading={pending}
+            loadingText={pendingLabel}
+          >
+            {confirmLabel}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/src/components/admin/lost-found-panel.tsx b/src/components/admin/lost-found-panel.tsx
index 50f6c82..01902c3 100644
--- a/src/components/admin/lost-found-panel.tsx
+++ b/src/components/admin/lost-found-panel.tsx
@@ -217,7 +217,7 @@ export function LostFoundPanel({
               </div>
             </div>
             <div className="flex gap-2">
-              <Button size="sm" onClick={submit} disabled={busy}>
+              <Button size="sm" onClick={submit} loading={busy}>
                 Open missing case
               </Button>
               <Button
diff --git a/src/components/admin/medical/clinic-expectation-controls.tsx b/src/components/admin/medical/clinic-expectation-controls.tsx
index 5790bc1..ce45bb0 100644
--- a/src/components/admin/medical/clinic-expectation-controls.tsx
+++ b/src/components/admin/medical/clinic-expectation-controls.tsx
@@ -140,6 +140,7 @@ export function ClinicExpectationResolveButtons({
         variant="outline"
         size="sm"
         onClick={onMarkSeen ?? seen}
+        loading={mutation.pending}
         disabled={mutation.pending}
         aria-label={`Mark ${label} seen`}
       >
diff --git a/src/components/admin/medical/fields.tsx b/src/components/admin/medical/fields.tsx
index 7e64c03..94c96da 100644
--- a/src/components/admin/medical/fields.tsx
+++ b/src/components/admin/medical/fields.tsx
@@ -63,9 +63,9 @@ export function MedicalDialog({
           <Button
             onClick={onSubmit}
             className="w-full"
-            disabled={pending}
+            loading={pending}
           >
-            {pending ? "Saving…" : submitLabel}
+            {submitLabel}
           </Button>
         </div>
       </DialogContent>
diff --git a/src/components/admin/medical/follow-up-controls.tsx b/src/components/admin/medical/follow-up-controls.tsx
index a293f52..0076f73 100644
--- a/src/components/admin/medical/follow-up-controls.tsx
+++ b/src/components/admin/medical/follow-up-controls.tsx
@@ -115,6 +115,7 @@ export function FollowUpResolveButtons({
         variant="outline"
         size="sm"
         onClick={complete}
+        loading={mutation.pending}
         disabled={mutation.pending}
         aria-label={`Complete ${label}`}
       >
diff --git a/src/components/admin/medical/mark-seen-dialog.tsx b/src/components/admin/medical/mark-seen-dialog.tsx
index 4649106..ec7f19b 100644
--- a/src/components/admin/medical/mark-seen-dialog.tsx
+++ b/src/components/admin/medical/mark-seen-dialog.tsx
@@ -112,8 +112,8 @@ export function MarkSeenDialog({
           >
             Back
           </Button>
-          <Button onClick={confirm} disabled={mutation.pending}>
-            {mutation.pending ? "Saving…" : "Mark seen"}
+          <Button onClick={confirm} loading={mutation.pending}>
+            Mark seen
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/src/components/admin/medical/ownership-panel.tsx b/src/components/admin/medical/ownership-panel.tsx
index 305fb43..0a9d9b1 100644
--- a/src/components/admin/medical/ownership-panel.tsx
+++ b/src/components/admin/medical/ownership-panel.tsx
@@ -384,7 +384,7 @@ export function OwnershipPanel({
             )}
 
             <div className="flex gap-2">
-              <Button size="sm" onClick={submit} disabled={busy}>
+              <Button size="sm" onClick={submit} loading={busy}>
                 Save
               </Button>
               <Button
diff --git a/src/components/admin/microchip-panel.tsx b/src/components/admin/microchip-panel.tsx
index cdc95f3..7c7ce88 100644
--- a/src/components/admin/microchip-panel.tsx
+++ b/src/components/admin/microchip-panel.tsx
@@ -448,7 +448,7 @@ export function MicrochipPanel({
             )}
 
             <div className="flex gap-2">
-              <Button size="sm" onClick={submit} disabled={busy}>
+              <Button size="sm" onClick={submit} loading={busy}>
                 Save
               </Button>
               <Button
diff --git a/src/components/admin/registration-panel.tsx b/src/components/admin/registration-panel.tsx
index 291739c..7ad6ee6 100644
--- a/src/components/admin/registration-panel.tsx
+++ b/src/components/admin/registration-panel.tsx
@@ -940,7 +940,7 @@ export function RegistrationPanel({
             </div>
 
             <div className="flex gap-2">
-              <Button size="sm" onClick={submit} disabled={busy}>
+              <Button size="sm" onClick={submit} loading={busy}>
                 Save
               </Button>
               <Button
diff --git a/src/components/admin/team-manager.tsx b/src/components/admin/team-manager.tsx
index 3594f7a..f33a0cb 100644
--- a/src/components/admin/team-manager.tsx
+++ b/src/components/admin/team-manager.tsx
@@ -8,7 +8,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { Upload, X, Plus, LoaderCircle } from "lucide-react";
+import { Upload, X, Plus } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { logError } from "@/lib/logger";
 
@@ -221,19 +221,11 @@ export function TeamManager({ team, onChange }: TeamManagerProps) {
                     variant="outline"
                     size="sm"
                     onClick={() => document.getElementById(`photo-${index}`)?.click()}
-                    disabled={uploadingId === (team[index]?.id || `member-${index}`)}
+                    loading={uploadingId === (team[index]?.id || `member-${index}`)}
+                    loadingText="Uploading…"
                   >
-                    {uploadingId === (team[index]?.id || `member-${index}`) ? (
-                      <>
-                        <LoaderCircle className="h-4 w-4 mr-2 animate-spin" />
-                        Uploading...
-                      </>
-                    ) : (
-                      <>
-                        <Upload className="h-4 w-4 mr-2" />
-                        Upload Photo
-                      </>
-                    )}
+                    <Upload className="h-4 w-4 mr-2" />
+                    Upload Photo
                   </Button>
                   <p className="text-xs text-muted-foreground mt-1">
                     JPG, PNG or GIF. Max 5MB.