antd design pro 中的PageLoading 使用方法

Ant Design Pro 中的 PageLoading 是一个页面级别的 Loading 组件，用于在页面加载时显示 Loading 效果。

使用 PageLoading 很简单，只需要在需要显示 Loading 效果的组件中，根据需要设置 `loading` 状态，然后在 JSX 中根据 `loading` 状态来决定是否渲染 PageLoading 组件即可，示例如下：

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` 状态来决定是否渲染 PageLoading 组件。

PageLoading 组件提供了多种属性，可以根据需要进行设置，如 `tip` 属性用于设置 Loading 文字提示，`delay` 属性用于设置延迟显示 Loading 的时间等。具体使用方法可以参考官方文档：[https://procomponents.ant.design/components/page-loading](https://procomponents.ant.design/components/page-loading)。