From e7e33b9d99174145b29d4a44aba99220d3ec9b09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@probo.com>
Date: Mon, 20 Jul 2026 19:00:24 +0200
Subject: [PATCH] Match list skeletons to the card surface
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ListItemSkeleton reused a sand-2 fill that read as a
different card; use the real row shell with pulse bars
instead, and shrink the updates skeleton to five rows.

Signed-off-by: Émile Ré <emile@probo.com>
---
 .../src/pages/updates/UpdatesPageSkeleton.tsx   |  7 +++++--
 packages/ui/src/v2/Dialog/variants.ts           |  4 ++--
 packages/ui/src/v2/List/ListItemSkeleton.tsx    | 17 +++++++++++++----
 packages/ui/src/v2/List/variants.ts             |  1 -
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx b/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx
index 5e83e482c..637384a5c 100644
--- a/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx
+++ b/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx
@@ -27,7 +27,10 @@ import { HeaderBand } from "#/components/HeaderBand/HeaderBand";
 import { pageHeader } from "#/components/PageHeader/variants";
 
 import { updatesList } from "./_components/variants";
-import { UPDATES_PAGE_SIZE } from "./_lib/constants";
+
+// Placeholder rows for the loading card — enough to read as a list, far fewer
+// than UPDATES_PAGE_SIZE so the skeleton does not dominate the viewport.
+const UPDATES_SKELETON_COUNT = 5;
 
 export function UpdatesPageSkeleton() {
   const { card, rows } = updatesList();
@@ -47,7 +50,7 @@ export function UpdatesPageSkeleton() {
         <div className="flex w-full max-w-5xl flex-col gap-8">
           <div className={card()} aria-hidden>
             <div className={rows()}>
-              {Array.from({ length: UPDATES_PAGE_SIZE }, (_, index) => (
+              {Array.from({ length: UPDATES_SKELETON_COUNT }, (_, index) => (
                 <ComplianceArticleItemSkeleton key={index} />
               ))}
             </div>
diff --git a/packages/ui/src/v2/Dialog/variants.ts b/packages/ui/src/v2/Dialog/variants.ts
index ba09b4e2f..0b8dc21ad 100644
--- a/packages/ui/src/v2/Dialog/variants.ts
+++ b/packages/ui/src/v2/Dialog/variants.ts
@@ -32,7 +32,7 @@ export const dialog = tv({
     ],
     popup: [
       "fixed left-1/2 top-1/2 z-5 -translate-x-1/2 -translate-y-1/2",
-      "flex w-[calc(100vw-2rem)] max-w-[600px] flex-col gap-4",
+      "flex w-[calc(100vw-2rem)] max-w-150 flex-col gap-4",
       "max-h-[calc(100vh-2rem)] overflow-y-auto overflow-x-clip",
       "rounded-5 border border-sand-6 bg-sand-1 py-6 shadow-6 outline-none",
       "transition-all duration-150",
@@ -51,7 +51,7 @@ export const dialog = tv({
 // so a placeholder can render before Base UI (and the content) loads.
 export const dialogSkeleton = tv({
   base: [
-    "flex w-full max-w-[600px] flex-col gap-4",
+    "flex w-full max-w-150 flex-col gap-4",
     "rounded-5 border border-sand-6 bg-sand-1 py-6 shadow-6",
   ],
 });
diff --git a/packages/ui/src/v2/List/ListItemSkeleton.tsx b/packages/ui/src/v2/List/ListItemSkeleton.tsx
index 229e585c8..6fc59f260 100644
--- a/packages/ui/src/v2/List/ListItemSkeleton.tsx
+++ b/packages/ui/src/v2/List/ListItemSkeleton.tsx
@@ -20,15 +20,24 @@
 
 import type { ComponentProps } from "react";
 
+import { TextSkeleton } from "../typography/TextSkeleton";
+
 import { list } from "./variants";
 
 export type ListItemSkeletonProps = Omit<ComponentProps<"li">, "children">;
 
-// Loading placeholder paired with ListItem: a pulse bar that keeps the row
-// dividers of a List.
+// Loading placeholder paired with ListItem: same row shell (card background +
+// dividers) with pulse bars for the primary column — not a filled sand-2 slab.
 export function ListItemSkeleton(props: ListItemSkeletonProps) {
   const { className, ...rest } = props;
-  const { skeletonItem } = list();
+  const { item, content } = list();
 
-  return <li className={skeletonItem({ className })} aria-hidden {...rest} />;
+  return (
+    <li className={item({ className })} aria-hidden {...rest}>
+      <div className={content()}>
+        <TextSkeleton size={2} className="w-40" />
+        <TextSkeleton size={1} className="w-24" />
+      </div>
+    </li>
+  );
 }
diff --git a/packages/ui/src/v2/List/variants.ts b/packages/ui/src/v2/List/variants.ts
index a8138cefd..ae456db4d 100644
--- a/packages/ui/src/v2/List/variants.ts
+++ b/packages/ui/src/v2/List/variants.ts
@@ -27,6 +27,5 @@ export const list = tv({
     root: "list-none overflow-hidden rounded-4 border border-sand-a3 bg-sand-1",
     item: "flex items-center gap-4 border-b border-sand-a3 px-4 py-3 last:border-b-0",
     content: "flex min-w-0 flex-1 flex-col gap-0.5",
-    skeletonItem: "h-16 animate-pulse border-b border-sand-a3 bg-sand-2 last:border-b-0",
   },
 });