gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-09-10 18:45:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Frontend consistency sweep Tier 4: skeleton uses Card primitive

Browse Source 
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.
This commit is contained in:
rcourtman
2026-05-28 08:12:47 +01:00
parent 0f3e2aad15
commit 2012fb55b7
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/features/alerts/AlertDestinationsLoadingState.tsx
+8 -6
View File
@@ -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>
);
}