feat: 添加全局管理Loading组件示例

src/app.tsx

@@ -1,9 +1,19 @@
 import { RouterProvider } from 'react-router/dom';
 
+import { useLoadingStore } from '@/store';
+
+import { Loading } from '@/components';
+
 import router from './router';
 
 function App() {
-  return <RouterProvider router={router} />;
+  const { isLoading } = useLoadingStore();
+  return (
+    <>
+      <RouterProvider router={router} />
+      {isLoading && <Loading />}
+    </>
+  );
 }
 
 export default App;

src/components/index.ts

@@ -1,3 +1,4 @@
 export { default as AutoScrollToTop } from './auto-scroll-to-top';
 export { default as HighLight } from './high-light';
 export { default as NotFount } from './not-fount';
+export { default as Loading } from './loading';

src/components/loading/index.scss

@@ -0,0 +1,16 @@
+.pub-loading {
+  position: fixed;
+  inset: 0;
+  z-index: 9999999;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: rgba($color: #000, $alpha: 20%);
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    width: 100px;
+    height: 100px;
+  }
+}

src/components/loading/index.tsx

@@ -0,0 +1,32 @@
+import { memo } from 'react';
+
+import './index.scss';
+
+function Loading() {
+  return (
+    <div className="pub-loading">
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+        <path
+          fill="none"
+          stroke="#4579FF"
+          strokeDasharray="15"
+          strokeDashoffset="15"
+          strokeLinecap="round"
+          strokeWidth="2"
+          d="M12 3C16.9706 3 21 7.02944 21 12"
+        >
+          <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0" />
+          <animateTransform
+            attributeName="transform"
+            dur="1.5s"
+            repeatCount="indefinite"
+            type="rotate"
+            values="0 12 12;360 12 12"
+          />
+        </path>
+      </svg>
+    </div>
+  );
+}
+
+export default memo(Loading);

src/views/guild/count/index.scss

@@ -1,8 +1,12 @@
 $prefix-cls: 'pg-guild-count';
 
 .#{$prefix-cls} {
+  display: flex;
   font-size: 17px;
   box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 
   &__count {
     font-weight: bold;

src/views/guild/count/index.tsx

@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useDesign, useRouter } from '@/hooks';
+import { useLoadingStore } from '@/store';
 
 import './index.scss';
 
@@ -11,6 +12,15 @@ function Count() {
 
   const router = useRouter();
 
+  const { showLoading, hideLoading } = useLoadingStore();
+
+  const handleLoading = useCallback(() => {
+    showLoading();
+    setTimeout(() => {
+      hideLoading();
+    }, 1000);
+  }, []);
+
   return (
     <div className={prefixCls}>
       <span className={`${prefixCls}__count`}>{count}</span>
@@ -19,6 +29,7 @@ function Count() {
       <button onClick={() => router.push('/guild/create')}>跳转guild/create页面</button>
       <button onClick={() => (location.href = '/auth-test')}>路由权限测试</button>
       <button onClick={() => router.push('/error-test')}>ErrorBoundary 测试</button>
+      <button onClick={handleLoading}>loading展示，1s后关闭</button>
     </div>
   );
 }