加入进度条效果

app/components/home.tsx

@@ -31,9 +31,45 @@ import { type ClientApi, getClientApi } from "../client/api";
 import { useAccessStore } from "../store";
 
 export function Loading() {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const intervalId = setInterval(() => {
+      if (isMounted && progress < 100) {
+        // 每隔一段时间增加1%进度
+        setProgress(prevProgress => prevProgress + 1);
+      }
+    }, 10);// 每10毫秒更新1%进度
+
+    return () => {
+      isMounted = false;
+      clearInterval(intervalId);
+    };
+  }, [progress]);
+
   return (
     <div className={styles["loading-content"] + " no-dark"}>
       <img src={loadingIcon.src} />
+      <div style={{ width: '60%', height: 15, background: '#F5F6F9', borderRadius: 8, marginTop: '20%', position: 'relative' }}>
+        <div
+          style={{
+            width: `${progress}%`,
+            height: 15,
+            background: '#265C7D',
+            borderRadius: 8,
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            position: 'absolute'
+          }}
+        >
+          <div style={{ color: '#FFFFFF', fontSize: 12, lineHeight: 12, marginRight: 4 }}>
+            {progress}%
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
@@ -41,7 +77,7 @@ export function Loading() {
 // 延时器
 export const delayer = (): Promise<any> => {
   // 延时时间-秒
-  const time: number = 0.5;
+  const time: number = 0.8;
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve({});