react antd 全局loading

您可以使用 antd 的 Spin 组件来实现全局 loading 效果。您可以创建一个高阶组件，包装需要加载的组件，并在组件加载时显示 Spin 组件。以下是一个简单的例子：

import { Spin } from 'antd';

const withLoading = (Component) => {
  return ({ isLoading, ...props }) => {
    if (isLoading) {
      return <Spin />;
    }
    return <Component {...props} />;
  };
};

// 使用示例
const MyComponent = (props) => {
  // ...
};

const MyComponentWithLoading = withLoading(MyComponent);

const App = () => {
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    // 异步操作
    setIsLoading(false);
  }, []);

  return (
    <div>
      <MyComponentWithLoading isLoading={isLoading} />
    </div>
  );
};

在上面的例子中，`withLoading` 函数接受一个组件作为参数，并返回一个新的组件。这个新组件会根据 `isLoading` 属性决定是否显示 Spin 组件或原始组件。在 App 组件中，我们使用 `useState` 来跟踪加载状态，然后在 useEffect 中模拟异步操作并更新 `isLoading` 状态。最后，我们将 MyComponentWithLoading 组件渲染到页面中，传递 isLoading 属性以决定是否显示 Spin 组件。