商城列表加载时优化

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,9 +87,12 @@ export default function Mall(props: Props) {
           showResultItem
           onChange={onFilterChange}
         ></Filter>
+
         <div className={styles.productList}>
           <div className={styles.title}>四旋翼无人机</div>
           <div className={styles.main}>
+            <div style={{ flex: "auto"}}>
+              <Spin spinning={loading} delay={500}>
                 <div className={styles.listContent}>
                   <ul className={styles.listWrap}>
                     {productList.map((item, i) => {
@@ -125,6 +132,7 @@ export default function Mall(props: Props) {
                   </ul>
                   <Pagination
                     current={pageParams.pageNo}
+                    defaultPageSize={pageParams.pageSize}
                     showSizeChanger={false}
                     showQuickJumper
                     total={count}
@@ -133,6 +141,8 @@ export default function Mall(props: Props) {
                     style={{ marginTop: 20 }}
                   />
                 </div>
+              </Spin>
+            </div>
 
             <div className={styles.adList}>
               {adList.map((item) => {
@@ -144,6 +154,7 @@ export default function Mall(props: Props) {
                     width="270"
                     height="270"
                     preview={false}
+                    fallback={errImg}
                   ></Image>
                 );
               })}