From aa63bff8ca963cbad7acc76c567689d125db613f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com>
Date: Mon, 3 Jul 2023 09:31:36 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.tsx | 45 ++++++++++++++++++++++++++++++++-------
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 09aabda..f43f2ca 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Dropdown, SpinLoading, Tabs } from "antd-mobile";
+import { Dropdown, Skeleton, Tabs } from "antd-mobile";
 import { DropdownRef } from "antd-mobile/es/components/dropdown";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
@@ -226,13 +226,42 @@ const IndexPage = () => {
         </Dropdown>
       </div>
       <div className={styles["list-box"]}>
-        {loading && (
-          <div
-            style={{ width: "100%", display: "flex", justifyContent: "center" }}
-          >
-            <SpinLoading color="primary" />
-          </div>
-        )}
+        {loading &&
+          Array.from({ length: 2 }).map((_, i) => (
+            <div
+              style={{
+                width: "100%",
+                height: 75,
+                display: "flex",
+                alignItems: "center",
+                marginBottom: 30,
+                marginTop: 30,
+              }}
+              key={i}
+            >
+              <Skeleton
+                animated
+                style={{
+                  width: 100,
+                  height: 75,
+                  borderRadius: 8,
+                  marginRight: 15,
+                }}
+              />
+              <div
+                style={{
+                  flex: 1,
+                  height: 75,
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "space-between",
+                }}
+              >
+                <Skeleton animated style={{ width: "100%", height: 21 }} />
+                <Skeleton animated style={{ width: "100%", height: 24 }} />
+              </div>
+            </div>
+          ))}
         {!loading && coursesList.length === 0 && <Empty></Empty>}
         {!loading && coursesList.length > 0 && (
           <>