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";