@fvc/skeleton

@fvc/skeleton provides loading placeholder primitives on top of Ant Design's Skeleton component. It applies the FE-VIS class prefix and exposes the full Ant Design API alongside a testId prop for test targeting. Sub-components cover the most common placeholder shapes: paragraphs, avatars, buttons, inputs, and images.

Installation

bun add @fvc/skeleton

Peer Dependencies

The package expects these dependencies to be available in the consuming application:

bun add react antd

Import

import { Skeleton } from '@fvc/skeleton';

Quick Start

import { Skeleton } from '@fvc/skeleton';

export function ArticleCard({ loading }) {
  return (
    <Skeleton loading={loading} active>
      <div>Article content</div>
    </Skeleton>
  );
}

Common Usage

Paragraph Skeleton

<Skeleton active />

Avatar with Paragraph

<Skeleton avatar active />

Specific Number of Lines

<Skeleton active paragraph={{ rows: 4 }} />

Button Placeholder

<Skeleton.Button active />

Avatar Placeholder

<Skeleton.Avatar active />

Input Placeholder

<Skeleton.Input active />

Image Placeholder

<Skeleton.Image active />

Wrap Real Content

The loading prop conditionally shows the skeleton or the wrapped children.

<Skeleton loading={isLoading} active avatar>
  <UserCard user={user} />
</Skeleton>

Props

<Skeleton>

Extends all Ant Design SkeletonProps.

| Prop | Type | Description | | ----------- | ------------------ | ---------------------------------------------- | | loading | boolean | Shows the skeleton when true. | | active | boolean | Applies animated shimmer. | | avatar | boolean | Includes an avatar placeholder. | | paragraph | object | Configures the paragraph rows count and width. | | title | boolean | Includes a title placeholder. | | testId | string | Maps to data-testid on the root element. |

<Skeleton.Button>

| Prop | Type | Description | | -------- | ------------------ | ---------------------------------------- | | active | boolean | Applies animated shimmer. | | size | string | 'large', 'small', 'default' | | shape | string | 'default', 'round', 'circle' |

<Skeleton.Avatar>

| Prop | Type | Description | | -------- | ------------------ | ---------------------------------------- | | active | boolean | Applies animated shimmer. | | size | string \| number | Avatar size. | | shape | string | 'circle', 'square' |

<Skeleton.Input>

| Prop | Type | Description | | -------- | ------------------ | ---------------------------------------- | | active | boolean | Applies animated shimmer. | | size | string | 'large', 'small', 'default' |

<Skeleton.Image>

| Prop | Type | Description | | -------- | --------- | ------------------------- | | active | boolean | Applies animated shimmer. |

TypeScript

The package ships with type definitions. No @types/ install needed.

import type { SkeletonProps } from '@fvc/skeleton/types';

Consumer Example

import { Skeleton } from '@fvc/skeleton';

export function ProfilePage({ loading, user }) {
  return (
    <Skeleton loading={loading} active avatar paragraph={{ rows: 3 }}>
      <div>
        <img src={user.avatar} alt={user.name} />
        <h2>{user.name}</h2>
        <p>{user.bio}</p>
      </div>
    </Skeleton>
  );
}

Testing

<Skeleton testId="profile-skeleton" loading={loading} active />

screen.getByTestId('profile-skeleton');

Development

bun run lint
bun run type-check
bun run test
bun run build