- {Array.from({ length: UPDATES_PAGE_SIZE }, (_, index) => (
+ {Array.from({ length: UPDATES_SKELETON_COUNT }, (_, index) => (
))}
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
, "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 ;
+ return (
+
+
+
+
+
+
+ );
}
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",
},
});