From 2012fb55b79c6a18ec4e341d9e6420b2ff3d5d4a Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Thu, 28 May 2026 08:12:47 +0100
Subject: [PATCH] Frontend consistency sweep Tier 4: skeleton uses Card
 primitive

Replace the three bespoke `rounded-lg border border-border bg-surface p-6`
skeleton blocks in AlertDestinationsLoadingState with the Card primitive
(`padding="lg"`). Aligns the loading state to canonical rounding and
border tokens.

Other Tier 4 audit findings did not survive verification:
- Inline progress-bar divs in ProxmoxMailGatewayDrawer are stacked-segment
  bars (mail volume) and a two-segment In/Out comparison; the canonical
  ProgressBar is single-value only, so neither is a fit.
- PatrolIntelligenceSummary's bespoke `<section>` shells are semantically
  intentional landmarks; migrating to `Card` would render `<div>` and
  drop the landmark role.
- Custom date formatters in DockerAlertsTable and TrueNASAlertsTable
  diverge on edge-case behavior (year < 2000 handling, null-vs-dash
  fallbacks). Consolidation risks regressions that outweigh the
  duplication win.
- Native `<button>` usages and bespoke `<span>` badges in
  DockerAlertsTable / AgentsMachinesTable / TrueNAS tables are 30+
  sites that warrant their own focused refactor with tooltip-coverage
  evaluation, not a shotgun pass.
---
 .../alerts/AlertDestinationsLoadingState.tsx       | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend-modern/src/features/alerts/AlertDestinationsLoadingState.tsx b/frontend-modern/src/features/alerts/AlertDestinationsLoadingState.tsx
index 94574911c..20ccca381 100644
--- a/frontend-modern/src/features/alerts/AlertDestinationsLoadingState.tsx
+++ b/frontend-modern/src/features/alerts/AlertDestinationsLoadingState.tsx
@@ -1,7 +1,9 @@
+import { Card } from '@/components/shared/Card';
+
 export function AlertDestinationsLoadingState() {
   return (
     <div class="flex w-full flex-col gap-6 animate-pulse pointer-events-none select-none md:gap-8">
-      <div class="rounded-lg border border-border bg-surface p-6 space-y-4">
+      <Card padding="lg" class="space-y-4">
         <div class="flex items-center justify-between">
           <div class="space-y-2">
             <div class="h-5 w-40 rounded bg-surface-hover" />
@@ -15,8 +17,8 @@ export function AlertDestinationsLoadingState() {
           <div class="h-4 w-32 rounded bg-surface-hover" />
           <div class="h-10 w-full rounded bg-surface-hover" />
         </div>
-      </div>
-      <div class="rounded-lg border border-border bg-surface p-6 space-y-4">
+      </Card>
+      <Card padding="lg" class="space-y-4">
         <div class="flex items-center justify-between">
           <div class="space-y-2">
             <div class="h-5 w-44 rounded bg-surface-hover" />
@@ -28,8 +30,8 @@ export function AlertDestinationsLoadingState() {
           <div class="h-4 w-28 rounded bg-surface-hover" />
           <div class="h-10 w-full rounded bg-surface-hover" />
         </div>
-      </div>
-      <div class="rounded-lg border border-border bg-surface p-6 space-y-4">
+      </Card>
+      <Card padding="lg" class="space-y-4">
         <div class="flex items-center justify-between">
           <div class="space-y-2">
             <div class="h-5 w-28 rounded bg-surface-hover" />
@@ -38,7 +40,7 @@ export function AlertDestinationsLoadingState() {
           <div class="h-4 w-20 rounded bg-surface-hover" />
         </div>
         <div class="h-10 w-full rounded bg-surface-hover" />
-      </div>
+      </Card>
     </div>
   );
 }