antd pro基于antd封装一个loading工具类

Ant Design Pro 是一个基于 Ant Design 的企业级中后台前端/设计解决方案，提供了丰富的组件和工具，包括 Loading 组件。

在 Ant Design Pro 中，Loading 组件已经封装好了，可以直接使用。以下是一个示例：

import { useState } from 'react';
import { Button } from 'antd';
import { PageLoading } from '@ant-design/pro-layout';

function MyComponent() {
  const [loading, setLoading] = useState(false);

  const handleButtonClick = () => {
    setLoading(true);
    // 异步操作
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  };

  return (
    <div>
      <h1>My Component</h1>
      <Button onClick={handleButtonClick}>Fetch Data</Button>
      {loading && <PageLoading />}
    </div>
  );
}

export default MyComponent;

在上面的代码中，当用户点击按钮触发异步操作时，设置 `loading` 状态为 `true`，同时在 JSX 中根据 `loading` 状态来决定是否渲染 Loading 组件。

Ant Design Pro 提供了多种 Loading 组件，如 `PageLoading`、`CardLoading` 等，可以根据需要选择使用。同时，Ant Design Pro 还提供了更多的企业级组件和工具，如表格、表单、图表、国际化等，可供开发者使用。