react 全局loading

要实现 React 全局 Loading 效果，可以借助第三方库 react-loading-overlay，该库提供了一个 Overlay 组件，可以在全局覆盖一个 Loading 动画。

安装 react-loading-overlay：

npm install react-loading-overlay --save

在需要使用全局 Loading 效果的组件中，引入 Overlay 组件并使用：

import React, { useState } from "react";
import Overlay from "react-loading-overlay";

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

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

  return (
    <Overlay active={loading} spinner text="Loading...">
      <div>
        <h1>My Component</h1>
        <button onClick={handleButtonClick}>Fetch Data</button>
      </div>
    </Overlay>
  );
}

export default MyComponent;

在上面的代码中，当用户点击按钮触发异步操作时，设置 `loading` 状态为 `true`，此时 Overlay 组件会在全局覆盖一个 Loading 动画，并显示一个文本“Loading...”。

当异步操作完成后，设置 `loading` 状态为 `false`，Overlay 组件会自动隐藏，显示 MyComponent 组件的内容。