@apify/ui-library 1.168.3 → 1.170.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.168.3",
+    "version": "1.170.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -42,7 +42,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.54.0",
+        "@apify/ui-icons": "^1.55.0",
         "@floating-ui/react": "^0.27.19",
         "@floating-ui/react-dom": "^2.1.8",
         "@radix-ui/react-checkbox": "^1.3.3",
@@ -94,5 +94,5 @@
         "src",
         "style"
     ],
-    "gitHead": "fed97f595c48ce93b0f230388cf98113cd62791f"
+    "gitHead": "d0e0365ee11fe84fed449bf2b50e6b913f322fc4"
 }

package/src/components/box/box.stories.tsx

@@ -16,6 +16,7 @@ const meta: Meta<typeof Box> = {
     },
 };
 
+// oxlint-disable-next-line local/storybook-figma-design-url -- layout primitive, no Figma counterpart
 export default meta;
 
 type Story = StoryObj<typeof Box>;

package/src/components/color_wheel_gradient/color_wheel_gradient.stories.tsx

@@ -27,6 +27,7 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
     </div>
 );
 
+// oxlint-disable-next-line local/storybook-figma-design-url -- decorative gradient, no Figma counterpart
 export default {
     title: 'UI-Library/ColorWheelGradient',
     tags: ['deprecated'],
@@ -55,12 +56,6 @@ export default {
             control: 'number',
         },
     },
-    parameters: {
-        design: {
-            type: 'figma',
-            url: 'TODO: Add Figma URL',
-        },
-    },
 } as Meta<ColorWheelGradientProps>;
 
 type Story = StoryObj<ColorWheelGradientProps>;

package/src/components/image/image.stories.tsx

@@ -26,6 +26,7 @@ const meta: Meta<typeof Image> = {
     },
 };
 
+// oxlint-disable-next-line local/storybook-figma-design-url -- thin <img> wrapper, no Figma counterpart
 export default meta;
 
 type Story = StoryObj<typeof Image>;

package/src/components/index.ts

@@ -30,6 +30,7 @@ export * from './tabs';
 export * from './shortcut';
 export * from './icon_button';
 export * from './brand_icon';
+export * from './skeleton';
 export * from './spinner';
 export * from './store';
 export * from './checkbox';

package/src/components/readme_renderer/table_of_contents.stories.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { TableOfContents, type TableOfContentsProps } from './table_of_contents';
 
+// oxlint-disable-next-line local/storybook-figma-design-url -- no Figma counterpart
 export default {
     title: 'UI-Library/TableOfContents',
     component: TableOfContents,

package/src/components/skeleton/examples/actor_idea_cards_skeleton.example.tsx

@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+
+import { Box, Skeleton, SkeletonGroup, theme } from '@apify/ui-library';
+
+// apify.com Ideas search results: avatar, heading, a three-line paragraph and two footer chips.
+
+const StyledGrid = styled(SkeletonGroup)`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
+    gap: ${theme.space.space16};
+`;
+
+const StyledCard = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space16};
+    padding: ${theme.space.space16} ${theme.space.space24};
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius16};
+    background-color: ${theme.color.neutral.cardBackground};
+`;
+
+const StyledHeader = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space8};
+`;
+
+const StyledLines = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space12};
+`;
+
+const StyledFooter = styled(Box)`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${theme.space.space12};
+    margin-top: auto;
+`;
+
+const ActorIdeaCardSkeleton = () => (
+    <StyledCard>
+        <StyledHeader>
+            <Skeleton width={theme.space.space40} height={theme.space.space40} />
+            <Skeleton width="52%" height="2rem" />
+        </StyledHeader>
+        <StyledLines>
+            <Skeleton height={theme.space.space16} />
+            <Skeleton width="94%" height={theme.space.space16} />
+            <Skeleton width="68%" height={theme.space.space16} />
+        </StyledLines>
+        <StyledFooter>
+            <Skeleton width="52%" height="2rem" />
+            <Skeleton width="34%" height={theme.space.space16} />
+        </StyledFooter>
+    </StyledCard>
+);
+
+export const ActorIdeaCardsSkeleton = ({ count = 6 }: { count?: number }) => (
+    <StyledGrid label="Loading Actor ideas">
+        {Array.from({ length: count }, (_, index) => (
+            <ActorIdeaCardSkeleton key={index} />
+        ))}
+    </StyledGrid>
+);

package/src/components/skeleton/examples/new_actor_wizard_cards_skeleton.example.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+import { Box, Skeleton, SkeletonGroup, theme } from '@apify/ui-library';
+
+// Console new Actor wizard: the use-case, language and recommendation cards of a step.
+
+const StyledGrid = styled(SkeletonGroup)`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+    gap: ${theme.space.space16};
+`;
+
+const StyledCard = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space16};
+    min-height: 23rem;
+    padding: ${theme.space.space24};
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius12};
+    background-color: ${theme.color.neutral.cardBackground};
+`;
+
+const StyledLines = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space4};
+`;
+
+const StyledActions = styled(StyledLines)`
+    margin-top: auto;
+`;
+
+const NewActorWizardCardSkeleton = () => (
+    <StyledCard>
+        <Skeleton width={theme.space.space32} height={theme.space.space32} />
+        <Skeleton width="40%" height={theme.space.space12} />
+        <StyledLines>
+            <Skeleton width="90%" height={theme.space.space8} />
+            <Skeleton width="70%" height={theme.space.space8} />
+        </StyledLines>
+        <StyledActions>
+            <Skeleton height={theme.space.space32} />
+            <Skeleton height={theme.space.space32} />
+        </StyledActions>
+    </StyledCard>
+);
+
+export const NewActorWizardCardsSkeleton = ({ count = 4 }: { count?: number }) => (
+    <StyledGrid label="Loading recommendations">
+        {Array.from({ length: count }, (_, index) => (
+            <NewActorWizardCardSkeleton key={index} />
+        ))}
+    </StyledGrid>
+);

package/src/components/skeleton/examples/publication_categories_skeleton.example.tsx

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+import { Box, Skeleton, SkeletonGroup, Text, theme } from '@apify/ui-library';
+
+// Actor publication tab while the LLM assigns categories: the labels are real text, only the values load.
+
+const CATEGORY_ROWS = [
+    { label: 'Use case', width: '49%' },
+    { label: 'Industry', width: '60%' },
+    { label: 'Output', width: '49%' },
+    { label: 'Domain', width: '60%' },
+    { label: 'Label', width: '55%' },
+];
+
+const StyledPanel = styled(SkeletonGroup)`
+    max-width: 48rem;
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius12};
+    background-color: ${theme.color.neutral.cardBackground};
+`;
+
+const StyledRow = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space16};
+    min-height: 5.2rem;
+    padding: ${theme.space.space16};
+
+    & + & {
+        border-top: 1px solid ${theme.color.neutral.separatorSubtle};
+    }
+`;
+
+const StyledLabel = styled(Text)`
+    flex: none;
+    width: 9.2rem;
+`;
+
+export const PublicationCategoriesSkeleton = () => (
+    <StyledPanel label="Assigning categories">
+        {CATEGORY_ROWS.map(({ label, width }) => (
+            <StyledRow key={label}>
+                <StyledLabel size="small" color={theme.color.neutral.textSubtle}>
+                    {label}
+                </StyledLabel>
+                <Skeleton width={width} height={theme.space.space12} />
+            </StyledRow>
+        ))}
+    </StyledPanel>
+);

package/src/components/skeleton/examples/store_actor_cards_loading.example.tsx

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+
+import { Box, SkeletonFadeIn, Text, theme } from '@apify/ui-library';
+
+import {
+    StoreActorCardsSkeleton,
+    StyledStoreCardBody,
+    StyledStoreCardFooter,
+    StyledStoreCardShell,
+} from './store_actor_cards_skeleton.example';
+
+// Show the skeleton only while the request is in flight, swap it for the content the moment the data lands,
+// and let the content fade in. The skeleton mirrors the card, so the swap does not move the page.
+
+type StoreActor = { id: string; title: string; name: string; description: string; author: string; stats: string };
+
+const StyledGrid = styled(Box)`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
+    gap: ${theme.space.space16};
+`;
+
+const StyledHeader = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space12};
+`;
+
+const StyledAvatar = styled(Box)`
+    flex: none;
+    width: ${theme.space.space40};
+    height: ${theme.space.space40};
+    border-radius: ${theme.radius.radius12};
+    background-color: ${theme.color.primary.background};
+`;
+
+const StoreActorCard = ({ actor }: { actor: StoreActor }) => (
+    <StyledStoreCardShell>
+        <StyledStoreCardBody>
+            <StyledHeader>
+                <StyledAvatar />
+                <Box>
+                    <Text weight="bold">{actor.title}</Text>
+                    <Text size="small" color={theme.color.neutral.textSubtle}>
+                        {actor.name}
+                    </Text>
+                </Box>
+            </StyledHeader>
+            <Text size="small">{actor.description}</Text>
+        </StyledStoreCardBody>
+        <StyledStoreCardFooter>
+            <Text size="small" color={theme.color.neutral.textSubtle}>
+                {actor.author}
+            </Text>
+            <Text size="small" color={theme.color.neutral.textSubtle}>
+                {actor.stats}
+            </Text>
+        </StyledStoreCardFooter>
+    </StyledStoreCardShell>
+);
+
+export const StoreActorCardsLoading = ({ actors }: { actors?: StoreActor[] }) => {
+    if (!actors) return <StoreActorCardsSkeleton count={2} />;
+
+    return (
+        <SkeletonFadeIn>
+            <StyledGrid>
+                {actors.map((actor) => (
+                    <StoreActorCard key={actor.id} actor={actor} />
+                ))}
+            </StyledGrid>
+        </SkeletonFadeIn>
+    );
+};

package/src/components/skeleton/examples/store_actor_cards_skeleton.example.tsx

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+
+import { Box, Skeleton, SkeletonGroup, theme } from '@apify/ui-library';
+
+// Store home sections, Store search and Actor collections. The card has two surfaces: the body is inset in a
+// `backgroundSubtle` shell and the footer sits on the shell. The translucent skeleton stays visible on both.
+
+const StyledGrid = styled(SkeletonGroup)`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
+    gap: ${theme.space.space16};
+`;
+
+export const StyledStoreCardShell = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space2};
+    padding: ${theme.space.space2};
+    border-radius: ${theme.radius.radius8};
+    background-color: ${theme.color.neutral.backgroundSubtle};
+`;
+
+export const StyledStoreCardBody = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+    padding: ${theme.space.space16};
+    border-radius: ${theme.radius.radius6};
+    background-color: ${theme.color.neutral.cardBackground};
+`;
+
+export const StyledStoreCardFooter = styled(Box)`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${theme.space.space8};
+    padding: ${theme.space.space4} ${theme.space.space8};
+`;
+
+const StyledRow = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space8};
+`;
+
+const StyledHeader = styled(StyledRow)`
+    gap: ${theme.space.space12};
+`;
+
+const StyledTitle = styled(Box)`
+    flex: 1;
+    min-width: 0;
+`;
+
+const StyledLines = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+`;
+
+const StoreActorCardSkeleton = () => (
+    <StyledStoreCardShell>
+        <StyledStoreCardBody>
+            <StyledHeader>
+                <Skeleton width={theme.space.space40} height={theme.space.space40} />
+                <StyledTitle>
+                    <Skeleton width="70%" height="2rem" />
+                </StyledTitle>
+            </StyledHeader>
+            <StyledLines>
+                <Skeleton height={theme.space.space12} />
+                <Skeleton width="62%" height={theme.space.space12} />
+            </StyledLines>
+        </StyledStoreCardBody>
+        <StyledStoreCardFooter>
+            <StyledRow>
+                <Skeleton width="2rem" height="2rem" />
+                <Skeleton width="3.8rem" height={theme.space.space16} />
+            </StyledRow>
+            <StyledRow>
+                <Skeleton width="5.6rem" height={theme.space.space16} />
+                <Skeleton width={theme.space.space40} height={theme.space.space16} />
+            </StyledRow>
+        </StyledStoreCardFooter>
+    </StyledStoreCardShell>
+);
+
+export const StoreActorCardsSkeleton = ({ count = 4 }: { count?: number }) => (
+    <StyledGrid label="Loading Actors">
+        {Array.from({ length: count }, (_, index) => (
+            <StoreActorCardSkeleton key={index} />
+        ))}
+    </StyledGrid>
+);

package/src/components/skeleton/index.ts

@@ -0,0 +1,5 @@
+export { Skeleton, type SkeletonProps } from './skeleton';
+export { SkeletonFadeIn, type SkeletonFadeInProps } from './skeleton_fade_in';
+export { SkeletonGroup, type SkeletonGroupProps } from './skeleton_group';
+export { skeletonClassNames } from './skeleton.styled';
+export { skeletonTestIds } from './skeleton.test_ids';

package/src/components/skeleton/skeleton.stories.tsx

@@ -0,0 +1,221 @@
+/* eslint-disable import/default -- Vite `?raw` imports have a default export the import plugin cannot see */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { theme } from '../../design_system/theme';
+import { Box } from '../box';
+import { Button } from '../button';
+import { Skeleton, SkeletonFadeIn, SkeletonGroup, skeletonTestIds } from './';
+import { ActorIdeaCardsSkeleton } from './examples/actor_idea_cards_skeleton.example';
+import actorIdeaCardsSource from './examples/actor_idea_cards_skeleton.example?raw';
+import { NewActorWizardCardsSkeleton } from './examples/new_actor_wizard_cards_skeleton.example';
+import newActorWizardCardsSource from './examples/new_actor_wizard_cards_skeleton.example?raw';
+import { PublicationCategoriesSkeleton } from './examples/publication_categories_skeleton.example';
+import publicationCategoriesSource from './examples/publication_categories_skeleton.example?raw';
+import { StoreActorCardsLoading } from './examples/store_actor_cards_loading.example';
+import storeActorCardsLoadingSource from './examples/store_actor_cards_loading.example?raw';
+import { StoreActorCardsSkeleton } from './examples/store_actor_cards_skeleton.example';
+import storeActorCardsSource from './examples/store_actor_cards_skeleton.example?raw';
+
+// Each story renders a `*.example.tsx` composition and shows that same file as its code, so what developers and
+// agents copy is exactly what is rendered.
+
+const meta: Meta<typeof Skeleton> = {
+    title: 'UI-Library/Skeleton',
+    tags: ['new'],
+    component: Skeleton,
+    subcomponents: { SkeletonGroup, SkeletonFadeIn },
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Placeholder for content that is loading. Mirror its layout with `Skeleton` blocks inside a ' +
+                    '`SkeletonGroup`, and wrap the loaded content in `SkeletonFadeIn`. Spec: apify/apify-design#257.\n\n' +
+                    'The stories are examples to copy next to the card they mirror.',
+            },
+        },
+    },
+    argTypes: {
+        width: { control: false },
+        height: { control: false },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+const withSource = (code: string) => ({ docs: { source: { code, language: 'tsx' } } });
+
+// ---------------------------------------------------------------------------
+// Shared assertions
+// ---------------------------------------------------------------------------
+
+const prefersReducedMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+const getLoadingRegion = async (canvasElement: HTMLElement, label: string, blockCount: number) => {
+    const region = within(canvasElement).getByRole('status', { name: label });
+    await expect(region).toHaveAttribute('data-test', skeletonTestIds.GROUP);
+    await expect(region).toHaveAttribute('aria-busy', 'true');
+    const blocks = within(region).getAllByTestId(skeletonTestIds.ROOT);
+    await expect(blocks).toHaveLength(blockCount);
+    return { region, blocks };
+};
+
+/** The spec every block follows: 4px radius, decorative, and the wave on `::after` unless motion is reduced. */
+const expectSpec = async (blocks: HTMLElement[]) => {
+    for (const block of blocks) {
+        await expect(block).toHaveAttribute('aria-hidden', 'true');
+        await expect(getComputedStyle(block).borderRadius).toBe(theme.radius.radius4);
+    }
+    const wave = getComputedStyle(blocks[0], '::after');
+    if (prefersReducedMotion()) {
+        await expect(wave.content).toBe('none');
+        return;
+    }
+    await expect(wave.animationDuration).toBe('1.6s');
+    await expect(wave.animationTimingFunction).toBe('ease-in-out');
+    await expect(wave.animationIterationCount).toBe('infinite');
+};
+
+/** Background the block is painted over: the nearest ancestor with an opaque background. */
+const getSurfaceColor = (element: HTMLElement) => {
+    let node = element.parentElement;
+    while (node && getComputedStyle(node).backgroundColor === 'rgba(0, 0, 0, 0)') node = node.parentElement;
+    return node ? getComputedStyle(node).backgroundColor : '';
+};
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+/**
+ * The primitive on its own: one block that fills the width of its container. A block sets only its height
+ * (default `1em`), plus a width when a line is shorter than its column.
+ */
+export const Default: Story = {
+    args: {
+        height: theme.space.space16,
+    },
+    decorators: [
+        (Story) => (
+            <Box style={{ maxWidth: '32rem' }}>
+                <Story />
+            </Box>
+        ),
+    ],
+    play: async ({ canvasElement }) => {
+        const block = within(canvasElement).getByTestId(skeletonTestIds.ROOT);
+        await expectSpec([block]);
+        // Without a width, the block fills its container.
+        await expect(block.getBoundingClientRect().width).toBe(block.parentElement?.getBoundingClientRect().width);
+    },
+};
+
+/** apify.com Ideas search results: the richest layout - avatar, heading, paragraph and two footer chips. */
+export const ActorIdeaCards: Story = {
+    render: () => <ActorIdeaCardsSkeleton />,
+    parameters: withSource(actorIdeaCardsSource),
+    play: async ({ canvasElement }) => {
+        const { blocks } = await getLoadingRegion(canvasElement, 'Loading Actor ideas', 6 * 7);
+        await expectSpec(blocks);
+    },
+};
+
+/**
+ * Store home sections, Store search and Actor collections. The footer sits on the `backgroundSubtle` shell
+ * rather than the card body; the translucent skeleton stays visible on both surfaces.
+ */
+export const StoreActorCards: Story = {
+    render: () => <StoreActorCardsSkeleton />,
+    parameters: withSource(storeActorCardsSource),
+    play: async ({ canvasElement }) => {
+        const { blocks } = await getLoadingRegion(canvasElement, 'Loading Actors', 4 * 8);
+        await expectSpec(blocks);
+        const [bodyBlock, , , , footerBlock] = blocks;
+        for (const block of [bodyBlock, footerBlock]) {
+            await expect(getComputedStyle(block).backgroundColor).not.toBe(getSurfaceColor(block));
+        }
+        await expect(getSurfaceColor(footerBlock)).not.toBe(getSurfaceColor(bodyBlock));
+    },
+};
+
+/** Actor publication tab while the LLM assigns categories: real labels, loading values. */
+export const PublicationCategories: Story = {
+    render: () => <PublicationCategoriesSkeleton />,
+    parameters: withSource(publicationCategoriesSource),
+    play: async ({ canvasElement }) => {
+        const { region, blocks } = await getLoadingRegion(canvasElement, 'Assigning categories', 5);
+        await expectSpec(blocks);
+        await expect(within(region).getByText('Use case')).toBeVisible();
+    },
+};
+
+/** Console new Actor wizard: the use-case, language and recommendation cards of a step. */
+export const NewActorWizardCards: Story = {
+    render: () => <NewActorWizardCardsSkeleton />,
+    parameters: withSource(newActorWizardCardsSource),
+    play: async ({ canvasElement }) => {
+        const { blocks } = await getLoadingRegion(canvasElement, 'Loading recommendations', 4 * 6);
+        await expectSpec(blocks);
+    },
+};
+
+const STORE_ACTORS = [
+    {
+        id: '1',
+        title: 'Website Content Crawler',
+        name: 'apify/website-content-crawler',
+        description: 'Crawl websites and extract text content to feed AI models and LLM applications.',
+        author: 'Apify',
+        stats: '4.6 · 92K users',
+    },
+    {
+        id: '2',
+        title: 'Google Maps Scraper',
+        name: 'compass/crawler-google-places',
+        description: 'Extract data from Google Maps places: reviews, contact details, opening hours and more.',
+        author: 'Compass',
+        stats: '4.7 · 210K users',
+    },
+];
+
+const LoadingToggle = () => {
+    const [isLoaded, setIsLoaded] = useState(false);
+
+    return (
+        <Box>
+            <Button size="small" variant="secondary" onClick={() => setIsLoaded((value) => !value)} mb="space16">
+                {isLoaded ? 'Load again' : 'Finish loading'}
+            </Button>
+            <StoreActorCardsLoading actors={isLoaded ? STORE_ACTORS : undefined} />
+        </Box>
+    );
+};
+
+/**
+ * The skeleton is swapped for the content the moment the data lands, and the content fades in over 80 ms.
+ * Because the skeleton mirrors the card, the swap does not move anything on the page.
+ */
+export const FadeIn: Story = {
+    render: () => <LoadingToggle />,
+    parameters: withSource(storeActorCardsLoadingSource),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const { region } = await getLoadingRegion(canvasElement, 'Loading Actors', 2 * 8);
+        const skeletonCardHeight = (region.firstElementChild as HTMLElement).getBoundingClientRect().height;
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Finish loading' }));
+
+        await expect(canvas.queryByTestId(skeletonTestIds.ROOT)).not.toBeInTheDocument();
+        const content = canvas.getByTestId(skeletonTestIds.FADE_IN);
+        await expect(content).toHaveTextContent('Website Content Crawler');
+        if (!prefersReducedMotion()) {
+            await expect(getComputedStyle(content).animationDuration).toBe('0.08s');
+        }
+        // The skeleton mirrors the card, so the loaded card is about as tall and nothing below it jumps.
+        const loadedCard = content.firstElementChild?.firstElementChild as HTMLElement;
+        await expect(Math.abs(loadedCard.getBoundingClientRect().height - skeletonCardHeight)).toBeLessThan(16);
+    },
+};