feat: 🎸 新增了一个全局加载组件

src/components/Layout/index.css

@@ -5,11 +5,9 @@
   width: 100%;
   background-color: #f2f3f5;
 
-  .app-layout-skeleton {
+  .app-layout-spin {
     flex: 1;
-    box-sizing: border-box;
-    padding: 100px;
-    background-color: aqua;
+    position: relative;
   }
 }
 /* 主内容区域 */

src/components/Layout/index.jsx

@@ -1,17 +1,19 @@
-import { useState, useEffect } from "react";
-import { Skeleton } from "@arco-design/web-react";
+import { useState } from "react";
+import { Spin } from "@arco-design/web-react";
+import { useSelector } from "react-redux";
 import Sidebar from "../Sidebar";
 import "./index.css";
 
 const Layout = ({ children }) => {
+  const loading = useSelector((state) => state.loading.value);
   const [isCollapsed, setIsCollapsed] = useState(true);
 
   return (
     <div className="app-layout">
       <Sidebar isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
-      <Skeleton loading={false} animation className="app-layout-skeleton">
+      <Spin loading={loading} size={40} className="app-layout-spin">
         <main className="main-content">{children}</main>
-      </Skeleton>
+      </Spin>
     </div>
   );
 };