diff --git a/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx b/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx index b5820d63..c26c4018 100644 --- a/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx +++ b/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx @@ -38,7 +38,7 @@ import { ActionRow } from "../ui/action-row/ActionRow.js"; import { EmptyState } from "../ui/empty-state/EmptyState.js"; import { ExpandableCard, - ExpandableCardSkeleton, + ExpandableCardListSkeleton, } from "../ui/expandable-card/ExpandableCard.js"; import { ExternalLink } from "../ui/external-link/ExternalLink.js"; import { Hint, type HintTone } from "../ui/hint/Hint.js"; @@ -653,7 +653,7 @@ export function ComponentsPage() { > The body appears while the card is open. - + diff --git a/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx b/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx index 7ee6b5c8..da5a3b26 100644 --- a/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx +++ b/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx @@ -12,7 +12,7 @@ import { Badge } from "@hive/shared/badge.js"; import { EmptyState } from "../../ui/empty-state/EmptyState.js"; import { ExpandableCard, - ExpandableCardSkeleton, + ExpandableCardListSkeleton, } from "../../ui/expandable-card/ExpandableCard.js"; import { Hint } from "../../ui/hint/Hint.js"; import { Toolbar } from "../../ui/toolbar/Toolbar.js"; @@ -163,11 +163,7 @@ function BuildsBody() { ) : null}
{runs === null && !error ? ( - <> - - - - + ) : null} {(runs ?? []).map((run) => ( {runs === null && !error ? ( - <> - - - - + ) : null} {(runs ?? []).map((run) => ( + {Array.from({ length: count }, (_, i) => ( + + ))} + + ); +} + export function ExpandableCardSkeleton({ metaOnOwnRow = false, }: { diff --git a/frontend/packages/swarm-ui/src/ui/hint/Hint.tsx b/frontend/packages/swarm-ui/src/ui/hint/Hint.tsx index 48025cd3..de5f7637 100644 --- a/frontend/packages/swarm-ui/src/ui/hint/Hint.tsx +++ b/frontend/packages/swarm-ui/src/ui/hint/Hint.tsx @@ -3,9 +3,9 @@ // for what each form and card used to restyle under its own class name, so // "muted", "warning", "error" and "ok" mean the same colour everywhere. // -// `error` and `warn` are read out when they appear (`role="alert"` for an -// error); the others are plain text unless the caller passes a `role`, such as -// `status` for a line that changes after a save. `class` is for a page's +// `error` is read out when it appears (`role="alert"`); the other tones are +// plain text unless the caller passes a `role`, such as `status` for a line +// that changes after a save. `class` is for a page's // layout around the hint (a margin, a width), not for its colour. import type { ComponentChildren } from "preact"; import "./Hint.css";