antd table add skeleton item for each row

Guri Bee

3 min read

·

19-10-2024

1

0

Share

Loading Data with Style: Using Ant Design Table's Skeleton for Seamless Loading Experiences

Loading indicators are crucial for a positive user experience, especially when dealing with data that takes time to fetch. Ant Design's Table component offers a powerful solution for displaying loading states with its built-in skeleton prop. This article explores how to effectively use skeleton to create a visually appealing and informative loading experience within your Ant Design tables.

Why Use a Skeleton?

Skeletons, in the context of web development, are placeholders that mimic the shape and structure of the content that is about to load. They provide visual cues to users, ensuring they understand that data is being fetched and the page isn't frozen.

Implementing Skeletons in Ant Design Table

Here's a step-by-step guide to implementing the skeleton prop in your Ant Design Table:

1. Importing Necessary Modules

import React, { useState } from 'react';
import { Table, Skeleton } from 'antd';

2. Setting Up Data and Columns

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

3. Defining the Skeleton Structure

const skeleton = (rowData) => (
  <Skeleton.Avatar active={true} size={40} />
  // Define skeleton elements for each column 
);

4. Integrating the Skeleton into the Table

const [data, setData] = useState([]);

useEffect(() => {
  // Simulate data fetching
  const fetchData = async () => {
    await new Promise((resolve) => setTimeout(resolve, 2000)); // Simulate loading delay
    setData([
      { key: 1, name: 'John Doe', age: 32, address: '123 Main St' },
      { key: 2, name: 'Jane Doe', age: 28, address: '456 Elm St' },
    ]);
  };
  fetchData();
}, []); 

const App = () => {
  return (
    <Table 
      columns={columns} 
      dataSource={data}
      loading={!data.length} // Show loading state when data is empty
      rowClassName={(record, index) => `table-row-${index}`} // Optional: Add class names for styling
      pagination={{ defaultPageSize: 5 }} // Optional: Set pagination
      // Define the skeleton for each row
      rowSkeleton={skeleton}
    />
  );
};

export default App;

Analyzing the Code:

• skeleton: The skeleton prop takes a function that receives the row data and returns a Skeleton component. You can customize the structure based on the columns in your table, creating individual skeletons for each column using Skeleton.Input, Skeleton.Paragraph, etc.
• loading: The loading prop is set to !data.length, indicating that the table is in loading state when the data array is empty.
• rowClassName: You can add specific styles to each row using the rowClassName prop, allowing you to apply custom styling based on the row index.
• rowSkeleton: This prop accepts a function that returns the skeleton structure for each row. The function takes the row data as an argument, allowing you to dynamically generate skeletons based on the data.

Best Practices for using Skeletons:

• Match the Real Content: Ensure your skeletons accurately mimic the shape and structure of your real content. This gives users a clear indication of what to expect.
• Provide Clear Feedback: Use visual indicators such as loading spinners or progress bars to provide users with real-time feedback about the loading process.
• Avoid Cluttered Skeletons: Keep the skeleton design minimal and focused on the essential elements. Overloading it can distract from the loading experience.
• Keep it Consistent: Utilize a consistent skeleton style throughout your application for a unified experience.

Beyond the Basics:

• Customizing Skeletons: Ant Design's Skeleton component offers various customization options. You can adjust the active prop to create animations, control the size of elements, and even customize the width and height properties for specific skeletons.
• Advanced Loading States: For more complex loading scenarios, consider using separate loading states for different data fetching phases (e.g., initial loading, error states, pagination loading).

Conclusion:

Using Ant Design's Table component with its skeleton prop provides a user-friendly and visually appealing way to handle loading states effectively. By understanding the principles of skeleton design and incorporating them into your data tables, you can significantly improve the overall user experience of your application.