Skip to main content
ProSkeleton provides pre-built skeleton loading states for ProComponents, offering consistent loading experiences across your application.

​
Features

  • Pre-configured Layouts: List, descriptions, and result page skeletons
  • Consistent Design: Matches ProComponents layouts
  • Customizable: Adjust skeleton appearance
  • Animated: Smooth loading animations
  • Responsive: Adapts to different screen sizes

​
Basic Usage

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

export default () => {
  return <ProSkeleton type="list" />;
};

​
Skeleton Types

<ProSkeleton type="list" />
Skeleton for list pages with search, toolbar, and list items.

​
List Page Skeleton

Full page skeleton with all components: 
import { ListPageSkeleton } from '@ant-design/pro-components';

export default () => {
  return (
    <ListPageSkeleton
      toolbar // Show toolbar skeleton
      list // Show list items
      search // Show search form
      pageHeader={false} // Hide page header
    />
  );
};

​
List Components

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

// Individual components
<PageHeaderSkeleton />
<ListToolbarSkeleton />
<ListSkeleton rowCount={5} />

​
Descriptions Page Skeleton

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

export default () => {
  return (
    <DescriptionsPageSkeleton
      pageHeader // Show page header
      list={false} // Hide list
      rowCount={8} // Number of description items
    />
  );
};

​
Descriptions Components

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

<DescriptionsSkeleton
  column={2}
  rowCount={6}
/>

<TableSkeleton
  columns={3}
  rowCount={10}
/>

​
Custom Skeleton

Combine skeleton components: 
import {
  PageHeaderSkeleton,
  ListToolbarSkeleton,
  TableSkeleton,
} from '@ant-design/pro-components';
import { ProCard } from '@ant-design/pro-components';

export default () => {
  return (
    <div>
      <PageHeaderSkeleton />
      <ProCard>
        <ListToolbarSkeleton />
        <TableSkeleton columns={5} rowCount={10} />
      </ProCard>
    </div>
  );
};

​
Active Animation

Enable wave animation: 
<ProSkeleton type="list" active />

​
Usage with Data Loading

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} />;
};

​
Built-in Skeleton Support

Many ProComponents have built-in skeleton loading: 
// ProTable shows skeleton automatically during request
<ProTable
  request={async () => {
    const data = await fetchData();
    return { data, success: true };
  }}
  columns={columns}
/>

// ProDescriptions shows skeleton during loading
<ProDescriptions
  request={async () => {
    const data = await fetchData();
    return { data, success: true };
  }}
  columns={columns}
/>

​
Key Props

​
ProSkeleton Props

PropTypeDescription
type'list' | 'descriptions' | 'result'Skeleton type
activebooleanEnable wave animation
pageHeaderbooleanShow page header skeleton
toolbarbooleanShow toolbar skeleton (list)
searchbooleanShow search form skeleton (list)
listbooleanShow list items skeleton
rowCountnumberNumber of rows

​
ListPageSkeleton Props

PropTypeDefaultDescription
pageHeaderbooleantrueShow page header
searchbooleantrueShow search form
toolbarbooleantrueShow toolbar
listbooleantrueShow list items
rowCountnumber5List item count
activebooleantrueWave animation

​
DescriptionsPageSkeleton Props

PropTypeDefaultDescription
pageHeaderbooleantrueShow page header
listbooleantrueShow descriptions
rowCountnumber8Description item count
columnnumber2Columns per row
activebooleantrueWave animation

​
TableSkeleton Props

PropTypeDescription
columnsnumberNumber of columns
rowCountnumberNumber of rows
activebooleanWave animation

​
Best Practices

Choose the skeleton type that matches your component:
  • Use list skeleton for ProTable/ProList
  • Use descriptions skeleton for ProDescriptions
  • Use custom skeletons for complex layouts
Enable the wave animation for better user experience:
<ProSkeleton type="list" active />
Configure skeleton props to match your actual component:
<ListPageSkeleton
  rowCount={10} // Match your page size
  pageHeader={false} // If you don't have page header
/>
ProTable and ProDescriptions have built-in skeleton support during request loading - no need to add custom skeletons.

​
Component Reference

​
Available Skeleton Components

import {
  ProSkeleton,              // Main skeleton component
  ListPageSkeleton,         // Full list page
  DescriptionsPageSkeleton, // Full descriptions page
  PageHeaderSkeleton,       // Page header only
  ListToolbarSkeleton,      // Toolbar only
  ListSkeleton,             // List items only
  DescriptionsSkeleton,     // Descriptions items only
  TableSkeleton,            // Table only
  TableItemSkeleton,        // Single table item
} from '@ant-design/pro-components';

Build docs developers (and LLMs) love

Get started for freeTalk to us