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() {
- {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", }, });