商城列表加载时优化

pages/mall/index.module.scss

@@ -15,6 +15,7 @@
       flex-shrink: 0;
       flex-direction: column;
       gap: 12px;
+      width: 270px;
 
       .ad {
         width: 270px;
@@ -26,13 +27,14 @@
 
   .listContent{
     width: 100%;
+    
   }
 
   .listWrap {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
-    height: auto;
+    height: 856px;
 
     .item {
       cursor: pointer;

pages/mall/index.page.tsx

 import React, { useEffect, useState } from "react";
-import { Empty, Pagination, Image } from "antd";
+import { Empty, Pagination, Image, Spin } from "antd";
 import Layout from "~/components/layout";
 import styles from "./index.module.scss";
 import { useRouter } from "next/router";
 import Filter, { AdapterResult, FilterResult } from "~/components/filter";
 import api, { Ad, Goods, ListPageGoodsInfoParams } from "./api";
+import errImg from "~/assets/errImg";
 
 // 此函数在构建时被调用
 export async function getServerSideProps() {
@@ -26,6 +27,7 @@ export default function Mall(props: Props) {
   const [count, setCount] = useState(0); //商品总数
   const [abort, setAbort] = useState<AbortController | null>(null); //请求中断对你
   const [adList, setAdList] = useState<Array<Ad>>([]); //广告列表
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     //中断前一次列表请求
@@ -38,6 +40,7 @@ export default function Mall(props: Props) {
     if (!abort) {
       return;
     }
+    setLoading(true);
     api
       .listPageGoodsInfo(
         {
@@ -51,6 +54,7 @@ export default function Mall(props: Props) {
       .then((res) => {
         setProductList(res.result?.list || []);
         setCount(res.result?.totalCount || 0);
+        setLoading(false);
       });
   }, [abort]);
 
@@ -83,55 +87,61 @@ export default function Mall(props: Props) {
           showResultItem
           onChange={onFilterChange}
         ></Filter>
+
         <div className={styles.productList}>
           <div className={styles.title}>四旋翼无人机</div>
           <div className={styles.main}>
-            <div className={styles.listContent}>
-              <ul className={styles.listWrap}>
-                {productList.map((item, i) => {
-                  return (
-                    <li
-                      key={i}
-                      className={styles.item}
-                      onClick={() => router.push("/mall/detail/" + item.id)}
-                    >
-                      <div className={styles.imgBox}>
-                        <Image
-                          alt=""
-                          src={item.imgUrl}
-                          className={styles.img}
-                          width={116}
-                          height={116}
-                          preview={false}
-                        ></Image>
-                      </div>
-                      <div className={styles.title}>{item.goodsName}</div>
-                      <div className={styles.sellCount}>
-                        半年售
-                        {(Math.floor(Math.random() * 901) + 100).toFixed(0)}
-                      </div>
-                    </li>
-                  );
-                })}
-                {productList.length === 0 && (
-                  <Empty
-                    style={{
-                      paddingTop: 20,
-                      width: "100%",
-                      textAlign: "center",
-                    }}
-                  ></Empty>
-                )}
-              </ul>
-              <Pagination
-                current={pageParams.pageNo}
-                showSizeChanger={false}
-                showQuickJumper
-                total={count}
-                onChange={onPageChange}
-                hideOnSinglePage={true}
-                style={{ marginTop: 20 }}
-              />
+            <div style={{ flex: "auto"}}>
+              <Spin spinning={loading} delay={500}>
+                <div className={styles.listContent}>
+                  <ul className={styles.listWrap}>
+                    {productList.map((item, i) => {
+                      return (
+                        <li
+                          key={i}
+                          className={styles.item}
+                          onClick={() => router.push("/mall/detail/" + item.id)}
+                        >
+                          <div className={styles.imgBox}>
+                            <Image
+                              alt=""
+                              src={item.imgUrl}
+                              className={styles.img}
+                              width={116}
+                              height={116}
+                              preview={false}
+                            ></Image>
+                          </div>
+                          <div className={styles.title}>{item.goodsName}</div>
+                          <div className={styles.sellCount}>
+                            半年售
+                            {(Math.floor(Math.random() * 901) + 100).toFixed(0)}
+                          </div>
+                        </li>
+                      );
+                    })}
+                    {productList.length === 0 && (
+                      <Empty
+                        style={{
+                          paddingTop: 20,
+                          width: "100%",
+                          textAlign: "center",
+                        }}
+                      ></Empty>
+                    )}
+                  </ul>
+                  <Pagination
+                    current={pageParams.pageNo}
+                    defaultPageSize={pageParams.pageSize}
+                    showSizeChanger={false}
+                    showQuickJumper
+                    total={count}
+                    onChange={onPageChange}
+                    hideOnSinglePage={true}
+                    style={{ marginTop: 20 }}
+                  />
+                </div>
+              </Spin>
             </div>
 
             <div className={styles.adList}>
@@ -144,6 +154,7 @@ export default function Mall(props: Props) {
                     width="270"
                     height="270"
                     preview={false}
+                    fallback={errImg}
                   ></Image>
                 );
               })}