ProSkeleton API

ProSkeleton provides loading skeleton screens for Pro components, matching the layout of ProTable, ProList, and ProDescriptions.

ProSkeletonProps

type

'list' | 'descriptions' | 'result'

default:"list"

Type of skeleton to display.

list - Skeleton for ProTable/ProList
descriptions - Skeleton for ProDescriptions
result - Skeleton for Result page

active

boolean

default:"true"

Whether to show animation.

List Skeleton Props

When type="list":

pageHeader

boolean | PageHeaderSkeletonProps

default:"true"

Whether to show page header skeleton.Can be an object to customize:

{
  active?: boolean;
}

Whether to show toolbar skeleton.Can be an object to customize:

{
  active?: boolean;
  actions?: number; // Number of action buttons
}

list

boolean | ListSkeletonProps

default:"true"

Whether to show list skeleton.Can be an object to customize:

{
  active?: boolean;
  size?: 'default' | 'large' | 'small';
  rows?: number; // Number of list items
}

statistic

boolean | number

default:"false"

Whether to show statistic cards.

boolean - Show/hide statistics
number - Number of statistic cards to show

Descriptions Skeleton Props

When type="descriptions":

pageHeader

boolean

default:"false"

Whether to show page header skeleton.

list

boolean | number

default:"true"

Whether to show descriptions skeleton.

boolean - Show/hide descriptions
number - Number of description items to show

columns

number

default:"3"

Number of columns for descriptions.

Exported Components

ProSkeleton also exports individual skeleton components:

PageHeaderSkeleton

Skeleton for page header.

import { PageHeaderSkeleton } from '@ant-design/pro-components';

<PageHeaderSkeleton active />

active

boolean

default:"true"

Whether to show animation.

ListToolbarSkeleton

Skeleton for list toolbar.

import { ListToolbarSkeleton } from '@ant-design/pro-components';

<ListToolbarSkeleton active actions={3} />

active

boolean

default:"true"

Whether to show animation.

actions

number

default:"2"

Number of action button skeletons.

TableSkeleton

Skeleton for table.

import { TableSkeleton } from '@ant-design/pro-components';

<TableSkeleton active columns={5} rows={10} />

active

boolean

default:"true"

Whether to show animation.

columns

number

default:"4"

Number of table columns.

rows

number

default:"8"

Number of table rows.

ListSkeleton

Skeleton for list items.

import { ListSkeleton } from '@ant-design/pro-components';

<ListSkeleton active size="large" rows={5} />

active

boolean

default:"true"

Whether to show animation.

size

'default' | 'large' | 'small'

default:"default"

Size of list items.

rows

number

default:"5"

Number of list items.

ListSkeletonItem

Skeleton for a single list item.

import { ListSkeletonItem } from '@ant-design/pro-components';

<ListSkeletonItem active size="large" />

active

boolean

default:"true"

Whether to show animation.

size

'default' | 'large' | 'small'

default:"default"

Size of the list item.

DescriptionsSkeleton

Skeleton for descriptions.

import { DescriptionsSkeleton } from '@ant-design/pro-components';

<DescriptionsSkeleton active items={6} columns={3} />

active

boolean

default:"true"

Whether to show animation.

items

number

default:"8"

Number of description items.

columns

number

default:"3"

Number of columns.

TableItemSkeleton

Skeleton for a table item row.

import { TableItemSkeleton } from '@ant-design/pro-components';

<TableItemSkeleton active columns={5} />

active

boolean

default:"true"

Whether to show animation.

columns

number

default:"4"

Number of columns in the row.

Usage Examples

List Skeleton
Descriptions Skeleton
Result Skeleton
With Loading State
Individual Components

import { ProSkeleton } from '@ant-design/pro-components';

// Full page skeleton with header, toolbar, and table
<ProSkeleton type="list" />

// Customized list skeleton
<ProSkeleton
  type="list"
  pageHeader={{
    active: true,
  }}
  toolbar={{
    active: true,
    actions: 3,
  }}
  list={{
    active: true,
    rows: 10,
    size: 'large',
  }}
  statistic={4}
/>

// Table only (no header or toolbar)
<ProSkeleton
  type="list"
  pageHeader={false}
  toolbar={false}
/>

import { ProSkeleton } from '@ant-design/pro-components';

// Basic descriptions skeleton
<ProSkeleton type="descriptions" />

// With page header and custom columns
<ProSkeleton
  type="descriptions"
  pageHeader
  list={12}
  columns={2}
/>

import { ProSkeleton } from '@ant-design/pro-components';

// Result page skeleton
<ProSkeleton type="result" active />

import { ProTable, ProSkeleton } from '@ant-design/pro-components';
import { useState, useEffect } from 'react';

export default () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData().then(result => {
      setData(result);
      setLoading(false);
    });
  }, []);

  if (loading) {
    return <ProSkeleton type="list" />;
  }

  return (
    <ProTable
      dataSource={data}
      columns={columns}
    />
  );
};

import {
  PageHeaderSkeleton,
  ListToolbarSkeleton,
  TableSkeleton,
  DescriptionsSkeleton,
} from '@ant-design/pro-components';

// Build custom skeleton layout
<div>
  <PageHeaderSkeleton active />
  <ListToolbarSkeleton active actions={2} />
  <TableSkeleton active rows={8} columns={5} />
</div>

// Or descriptions
<div>
  <PageHeaderSkeleton active />
  <DescriptionsSkeleton active items={9} columns={3} />
</div>

Best Practices

Match component type: Use type="list" for ProTable/ProList and type="descriptions" for ProDescriptions to match the actual component layout.
Show during data loading: Display skeleton while fetching data from API to improve perceived performance.
Customize for your layout: Adjust rows, columns, and other props to match your actual component configuration.
Keep animations: The default active animation provides better visual feedback.
Hide unnecessary parts: Set pageHeader={false} or toolbar={false} if your component doesn’t have those sections.

Components API

Form Fields API

Utilities

ProSkeleton

ProSkeleton API

ProSkeletonProps

List Skeleton Props

Descriptions Skeleton Props

Exported Components

PageHeaderSkeleton

ListToolbarSkeleton

TableSkeleton

ListSkeleton

ListSkeletonItem

DescriptionsSkeleton

TableItemSkeleton

Usage Examples

Best Practices

Build docs developers (and LLMs) love

Components API

Form Fields API

Utilities

​ProSkeleton API

​ProSkeletonProps

​List Skeleton Props

​Descriptions Skeleton Props

​Exported Components

​PageHeaderSkeleton

​ListToolbarSkeleton

​TableSkeleton

​ListSkeleton

​ListSkeletonItem

​DescriptionsSkeleton

​TableItemSkeleton

​Usage Examples

​Best Practices

Build docs developers (and LLMs) love

ProSkeleton API

ProSkeletonProps

List Skeleton Props

Descriptions Skeleton Props

Exported Components

PageHeaderSkeleton

ListToolbarSkeleton

TableSkeleton

ListSkeleton

ListSkeletonItem

DescriptionsSkeleton

TableItemSkeleton

Usage Examples

Best Practices