or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cards.mddescriptions.mdfield-rendering.mdform-components.mdindex.mdlayout.mdproviders.mdskeleton.mdtable-list.mdutilities.md
tile.json

skeleton.mddocs/

Skeleton Components

Loading state components for different UI patterns including tables, lists, descriptions, and page layouts. These components provide consistent loading experiences across all Pro components.

Capabilities

ProSkeleton - Main Skeleton Component

Primary skeleton component with support for multiple layout types and customizable loading states.

/**
 * Main skeleton component with multiple layout types
 * @param props - ProSkeleton configuration props
 * @returns JSX.Element
 */
function ProSkeleton(props: ProSkeletonProps): JSX.Element;

interface ProSkeletonProps {
  /** Skeleton type */
  type?: 'list' | 'result' | 'descriptions';
  /** Skeleton size */
  size?: 'small' | 'default' | 'large';
  /** Active animation */
  active?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Number of skeleton items */
  rows?: number;
  /** Show avatar placeholder */
  avatar?: boolean | SkeletonAvatarProps;
  /** Show title placeholder */
  title?: boolean | SkeletonTitleProps;
  /** Show paragraph placeholder */
  paragraph?: boolean | SkeletonParagraphProps;
  /** Round corners */
  round?: boolean;
  /** Children content to show when not loading */
  children?: React.ReactNode;
  /** Custom style */
  style?: React.CSSProperties;
  /** Custom class name */
  className?: string;
}

interface SkeletonAvatarProps {
  /** Avatar size */
  size?: 'large' | 'small' | 'default' | number;
  /** Avatar shape */
  shape?: 'circle' | 'square';
  /** Active animation */
  active?: boolean;
}

interface SkeletonTitleProps {
  /** Title width */
  width?: string | number;
  /** Active animation */
  active?: boolean;
}

interface SkeletonParagraphProps {
  /** Number of rows */
  rows?: number;
  /** Width of each row */
  width?: string | number | Array<string | number>;
  /** Active animation */
  active?: boolean;
}

Usage Examples:

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

// Basic list skeleton
const ListSkeleton = () => (
  <ProSkeleton
    type="list"
    loading={true}
    active
    rows={5}
    avatar
  />
);

// Result page skeleton
const ResultSkeleton = () => (
  <ProSkeleton
    type="result"
    loading={true}
    size="large"
  />
);

// Descriptions skeleton
const DescriptionsSkeleton = () => (
  <ProSkeleton
    type="descriptions"
    loading={true}
    paragraph={{ rows: 6 }}
  />
);

// Conditional skeleton
const ConditionalSkeleton = ({ loading, children }) => (
  <ProSkeleton
    loading={loading}
    active
    avatar={{ size: 'large', shape: 'circle' }}
    title={{ width: '60%' }}
    paragraph={{ rows: 4, width: ['100%', '90%', '80%', '60%'] }}
  >
    {children}
  </ProSkeleton>
);

List Skeleton Components

Specialized skeleton components for list-based interfaces.

/**
 * Skeleton component specifically designed for list pages
 * @param props - ListPageSkeleton configuration props
 * @returns JSX.Element
 */
function ListPageSkeleton(props: ListPageSkeletonProps): JSX.Element;

/**
 * Basic list skeleton component
 * @param props - ListSkeleton configuration props
 * @returns JSX.Element
 */
function ListSkeleton(props: ListSkeletonProps): JSX.Element;

/**
 * Individual list item skeleton
 * @param props - ListSkeletonItem configuration props
 * @returns JSX.Element
 */
function ListSkeletonItem(props: ListSkeletonItemProps): JSX.Element;

/**
 * List toolbar skeleton
 * @param props - ListToolbarSkeleton configuration props
 * @returns JSX.Element
 */
function ListToolbarSkeleton(props: ListToolbarSkeletonProps): JSX.Element;

interface ListPageSkeletonProps {
  /** Active animation */
  active?: boolean;
  /** Toolbar skeleton configuration */
  toolbar?: boolean | {
    /** Show search skeleton */
    search?: boolean;
    /** Show actions skeleton */
    actions?: boolean;
    /** Show filter skeleton */
    filter?: boolean;
  };
  /** List configuration */
  list?: boolean | {
    /** Number of items */
    itemCount?: number;
    /** Item size */
    size?: 'small' | 'default' | 'large';
    /** Show avatar */
    avatar?: boolean;
    /** Show actions */
    actions?: boolean;
  };
  /** Pagination skeleton */
  pagination?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Children content */
  children?: React.ReactNode;
}

interface ListSkeletonProps {
  /** Number of list items */
  count?: number;
  /** Item size */
  size?: 'small' | 'default' | 'large';
  /** Active animation */
  active?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Show avatar in items */
  avatar?: boolean;
  /** Show actions in items */
  actions?: boolean;
  /** Item layout */
  layout?: 'horizontal' | 'vertical';
}

interface ListSkeletonItemProps {
  /** Show avatar */
  avatar?: boolean | SkeletonAvatarProps;
  /** Show title */
  title?: boolean | SkeletonTitleProps;
  /** Show description */
  description?: boolean | SkeletonParagraphProps;
  /** Show actions */
  actions?: boolean | number;
  /** Active animation */
  active?: boolean;
  /** Item size */
  size?: 'small' | 'default' | 'large';
  /** Item layout */
  layout?: 'horizontal' | 'vertical';
}

interface ListToolbarSkeletonProps {
  /** Show search skeleton */
  search?: boolean;
  /** Show actions skeleton */
  actions?: boolean | number;
  /** Show filter skeleton */
  filter?: boolean;
  /** Active animation */
  active?: boolean;
}

Usage Examples:

import { 
  ListPageSkeleton, 
  ListSkeleton, 
  ListSkeletonItem,
  ListToolbarSkeleton 
} from "@ant-design/pro-components";

// Complete list page skeleton
const ListPageExample = () => (
  <ListPageSkeleton
    loading={true}
    active
    toolbar={{
      search: true,
      actions: true,
      filter: true
    }}
    list={{
      itemCount: 8,
      size: 'default',
      avatar: true,
      actions: true
    }}
    pagination={true}
  />
);

// Custom list skeleton
const CustomListSkeleton = () => (
  <ListSkeleton
    count={6}
    size="large"
    active
    avatar
    actions
    layout="horizontal"
  />
);

// Individual list items
const ListItemsExample = () => (
  <div>
    {Array.from({ length: 5 }).map((_, index) => (
      <ListSkeletonItem
        key={index}
        avatar={{ size: 'large', shape: 'circle' }}
        title={{ width: '40%' }}
        description={{ rows: 2 }}
        actions={2}
        active
      />
    ))}
  </div>
);

// Toolbar skeleton
const ToolbarSkeletonExample = () => (
  <ListToolbarSkeleton
    search={true}
    actions={3}
    filter={true}
    active
  />
);

Table Skeleton Components

Skeleton components specifically designed for table interfaces.

/**
 * Table skeleton component
 * @param props - TableSkeleton configuration props
 * @returns JSX.Element
 */
function TableSkeleton(props: TableSkeletonProps): JSX.Element;

/**
 * Individual table item skeleton
 * @param props - TableItemSkeleton configuration props
 * @returns JSX.Element
 */
function TableItemSkeleton(props: TableItemSkeletonProps): JSX.Element;

interface TableSkeletonProps {
  /** Number of columns */
  columns?: number;
  /** Number of rows */
  rows?: number;
  /** Active animation */
  active?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Show table header */
  header?: boolean;
  /** Column widths */
  columnWidths?: Array<string | number>;
  /** Row height */
  rowHeight?: number;
  /** Show actions column */
  actions?: boolean;
  /** Show selection column */
  selection?: boolean;
  /** Children content */
  children?: React.ReactNode;
}

interface TableItemSkeletonProps {
  /** Number of columns */
  columns?: number;
  /** Active animation */
  active?: boolean;
  /** Column widths */
  widths?: Array<string | number>;
  /** Show actions */
  actions?: boolean;
  /** Show selection */
  selection?: boolean;
}

Usage Examples:

import { TableSkeleton, TableItemSkeleton } from "@ant-design/pro-components";

// Full table skeleton
const TableSkeletonExample = () => (
  <TableSkeleton
    loading={true}
    active
    columns={5}
    rows={8}
    header={true}
    actions={true}
    selection={true}
    columnWidths={['15%', '25%', '20%', '20%', '20%']}
  />
);

// Custom table rows
const CustomTableRows = () => (
  <div>
    {Array.from({ length: 10 }).map((_, index) => (
      <TableItemSkeleton
        key={index}
        columns={4}
        active
        widths={['20%', '30%', '30%', '20%']}
        actions
      />
    ))}
  </div>
);

Page Header and Descriptions Skeletons

Skeleton components for page headers and description layouts.

/**
 * Page header skeleton component
 * @param props - PageHeaderSkeleton configuration props
 * @returns JSX.Element
 */
function PageHeaderSkeleton(props: PageHeaderSkeletonProps): JSX.Element;

/**
 * Descriptions skeleton component
 * @param props - DescriptionsSkeleton configuration props
 * @returns JSX.Element
 */
function DescriptionsSkeleton(props: DescriptionsSkeletonProps): JSX.Element;

interface PageHeaderSkeletonProps {
  /** Active animation */
  active?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Show breadcrumb skeleton */
  breadcrumb?: boolean;
  /** Show title skeleton */
  title?: boolean | SkeletonTitleProps;
  /** Show subtitle skeleton */
  subTitle?: boolean;
  /** Show description skeleton */
  description?: boolean | SkeletonParagraphProps;
  /** Show extra actions skeleton */
  extra?: boolean | number;
  /** Show tabs skeleton */
  tabs?: boolean | number;
  /** Children content */
  children?: React.ReactNode;
}

interface DescriptionsSkeletonProps {
  /** Active animation */
  active?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Number of items */
  items?: number;
  /** Items per row */
  column?: number;
  /** Item size */
  size?: 'small' | 'default' | 'large';
  /** Show title skeleton */
  title?: boolean;
  /** Show bordered layout */
  bordered?: boolean;
  /** Children content */
  children?: React.ReactNode;
}

// Alternative interface for descriptions page skeleton
interface DescriptionsPageSkeletonProps extends DescriptionsSkeletonProps {
  /** Page header configuration */
  pageHeader?: PageHeaderSkeletonProps;
}

Usage Examples:

import { 
  PageHeaderSkeleton, 
  DescriptionsSkeleton 
} from "@ant-design/pro-components";

// Page header skeleton
const HeaderSkeletonExample = () => (
  <PageHeaderSkeleton
    loading={true}
    active
    breadcrumb={true}
    title={{ width: '30%' }}
    subTitle={true}
    description={{ rows: 2 }}
    extra={3}
    tabs={4}
  />
);

// Descriptions skeleton
const DescriptionsSkeletonExample = () => (
  <DescriptionsSkeleton
    loading={true}
    active
    items={12}
    column={3}
    size="default"
    title={true}
    bordered={true}
  />
);

// Combined page skeleton
const DescriptionPageSkeleton = ({ loading }) => (
  <div>
    <PageHeaderSkeleton
      loading={loading}
      active
      breadcrumb={true}
      title={{ width: '25%' }}
      extra={2}
    />
    <DescriptionsSkeleton
      loading={loading}
      active
      items={15}
      column={2}
      bordered
    />
  </div>
);

Skeleton Configuration

// Common skeleton configuration options
interface SkeletonConfig {
  /** Animation configuration */
  animation: {
    /** Enable wave animation */
    active: boolean;
    /** Animation speed */
    speed: 'slow' | 'normal' | 'fast';
    /** Animation direction */
    direction: 'ltr' | 'rtl';
  };

  /** Size configurations */
  sizes: {
    small: {
      avatar: number;
      title: { height: number; marginBottom: number };
      paragraph: { lineHeight: number; spacing: number };
    };
    default: {
      avatar: number;
      title: { height: number; marginBottom: number };
      paragraph: { lineHeight: number; spacing: number };
    };
    large: {
      avatar: number;
      title: { height: number; marginBottom: number };
      paragraph: { lineHeight: number; spacing: number };
    };
  };

  /** Color scheme */
  colors: {
    /** Primary skeleton color */
    primary: string;
    /** Secondary skeleton color */
    secondary: string;
    /** Animation highlight color */
    highlight: string;
  };
}

// Skeleton type mappings
interface SkeletonTypeMapping {
  list: {
    components: ['avatar', 'title', 'paragraph'];
    layout: 'horizontal';
    defaultRows: 5;
  };
  
  result: {
    components: ['title', 'paragraph', 'actions'];
    layout: 'vertical';
    centered: true;
  };
  
  descriptions: {
    components: ['title', 'items'];
    layout: 'grid';
    columns: 2;
  };
}

Loading States Integration

// Integration patterns with other components
interface SkeletonIntegration {
  /** ProTable integration */
  table: {
    /** Show skeleton while loading */
    loading: boolean;
    /** Skeleton row count matches page size */
    syncWithPagination: boolean;
    /** Column-aware skeleton */
    respectColumns: boolean;
  };

  /** ProList integration */
  list: {
    /** Skeleton item count */
    itemCount: number;
    /** Match list item layout */
    matchLayout: boolean;
    /** Show pagination skeleton */
    pagination: boolean;
  };

  /** ProForm integration */
  form: {
    /** Field skeletons */
    fields: boolean;
    /** Action button skeletons */
    actions: boolean;
    /** Form layout matching */
    layout: 'horizontal' | 'vertical' | 'inline';
  };

  /** ProCard integration */
  card: {
    /** Card content skeleton */
    content: boolean;
    /** Card header skeleton */
    header: boolean;
    /** Card actions skeleton */
    actions: boolean;
  };
}

// Responsive skeleton behavior
interface ResponsiveSkeletonConfig {
  /** Breakpoint configurations */
  breakpoints: {
    xs: { columns: number; rows: number };
    sm: { columns: number; rows: number };
    md: { columns: number; rows: number };
    lg: { columns: number; rows: number };
    xl: { columns: number; rows: number };
  };

  /** Adaptive sizing */
  adaptive: {
    /** Auto-adjust based on container */
    container: boolean;
    /** Maintain aspect ratio */
    aspectRatio: boolean;
    /** Responsive text sizing */
    textSize: boolean;
  };
}

Advanced Skeleton Features

// Advanced skeleton customization
interface AdvancedSkeletonProps {
  /** Custom skeleton shapes */
  customShapes?: {
    /** Custom shape definitions */
    shapes: Array<{
      type: 'rectangle' | 'circle' | 'text' | 'image';
      width: string | number;
      height: string | number;
      radius?: number;
      position: { x: number; y: number };
    }>;
  };

  /** Skeleton templates */
  template?: 'card' | 'list-item' | 'form' | 'table-row' | 'page-header';

  /** Performance optimization */
  performance?: {
    /** Virtualization for large lists */
    virtualized: boolean;
    /** Lazy rendering */
    lazy: boolean;
    /** Memory optimization */
    memoryOptimized: boolean;
  };
}

// Skeleton theming
interface SkeletonTheme {
  /** Base colors */
  baseColor: string;
  /** Highlight color for animation */
  highlightColor: string;
  /** Border radius */
  borderRadius: number;
  /** Animation duration */
  animationDuration: number;
  /** Animation timing function */
  animationTimingFunction: string;
}