详情页加载优化

src/pages/course/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Image, Progress } from "antd";
+import { Row, Col, Spin, Image, Progress } from "antd";
 import styles from "./index.module.scss";
 import { useParams } from "react-router-dom";
 import { course as Course } from "../../api/index";
@@ -9,7 +9,7 @@ import { Empty } from "../../compenents";
 
 const CoursePage = () => {
   const params = useParams();
-  const [loading, setLoading] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(true);
   const [course, setCourse] = useState<any>({});
   const [chapters, setChapters] = useState<any>([]);
   const [hours, setHours] = useState<any>({});
@@ -23,7 +23,8 @@ const CoursePage = () => {
 
   const getDetail = () => {
     setLoading(true);
-    Course.detail(Number(params.courseId)).then((res: any) => {
+    Course.detail(Number(params.courseId))
+      .then((res: any) => {
         setCourse(res.data.course);
         setChapters(res.data.chapters);
         setHours(res.data.hours);
@@ -45,11 +46,30 @@ const CoursePage = () => {
           setTotalHours(arr);
         }
         setLoading(false);
+      })
+      .catch((e) => {
+        setLoading(false);
       });
   };
 
   return (
     <div className="container">
+      {loading && (
+        <Row
+          style={{
+            width: 1200,
+            margin: "0 auto",
+            paddingTop: 14,
+            minHeight: 301,
+          }}
+        >
+          <div className="float-left d-j-flex mt-50">
+            <Spin size="large" />
+          </div>
+        </Row>
+      )}
+      {!loading && (
+        <>
           <div className={styles["top-cont"]}>
             <div className="j-b-flex">
               <div className="d-flex">
@@ -125,7 +145,9 @@ const CoursePage = () => {
             )}
           </div>
           <div className={styles["chapters-hours-cont"]}>
-        {chapters.length === 0 && JSON.stringify(hours) === "{}" && <Empty />}
+            {chapters.length === 0 && JSON.stringify(hours) === "{}" && (
+              <Empty />
+            )}
             {chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
               <div className={styles["hours-list-box"]}>
                 {hours[0].map((item: any, index: number) => (
@@ -206,6 +228,8 @@ const CoursePage = () => {
               </div>
             )}
           </div>
+        </>
+      )}
     </div>
   );
 };