图片列表增加loading图

This commit is contained in:
禺狨 2023-03-14 17:59:39 +08:00
parent 3258cdde50
commit 091b5e2413

View File

@ -1,5 +1,6 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { import {
Spin,
Button, Button,
Row, Row,
Col, Col,
@ -41,6 +42,7 @@ export const ResourceImagesPage = () => {
const [visibleArr, setVisibleArr] = useState<any>([]); const [visibleArr, setVisibleArr] = useState<any>([]);
const [hoverArr, setHoverArr] = useState<any>([]); const [hoverArr, setHoverArr] = useState<any>([]);
const [selLabel, setLabel] = useState<string>("全部图片"); const [selLabel, setLabel] = useState<string>("全部图片");
const [loading, setLoading] = useState<boolean>(false);
// 删除图片 // 删除图片
const removeResource = () => { const removeResource = () => {
@ -69,6 +71,10 @@ export const ResourceImagesPage = () => {
// 获取图片列表 // 获取图片列表
const getImageList = () => { const getImageList = () => {
if (loading) {
return;
}
setLoading(true);
let categoryIds = category_ids.join(","); let categoryIds = category_ids.join(",");
resource resource
.resourceList(page, size, "", "", "", "IMAGE", categoryIds) .resourceList(page, size, "", "", "", "IMAGE", categoryIds)
@ -82,8 +88,10 @@ export const ResourceImagesPage = () => {
} }
setVisibleArr(arr); setVisibleArr(arr);
setHoverArr(arr); setHoverArr(arr);
setLoading(false);
}) })
.catch((err: any) => { .catch((err: any) => {
setLoading(false);
console.log("错误,", err); console.log("错误,", err);
}); });
}; };
@ -189,6 +197,11 @@ export const ResourceImagesPage = () => {
</div> </div>
</Col> </Col>
</Row> </Row>
{loading && (
<div className="float-left d-j-flex mt-24">
<Spin size="large" />
</div>
)}
{imageList.length === 0 && ( {imageList.length === 0 && (
<div className="d-flex"> <div className="d-flex">
<Col span={24}> <Col span={24}>