From 5a534aa6309849c6967fbc849f339ee0b8aff913 Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Mon, 12 Jun 2023 22:12:29 +0800
Subject: [PATCH] perf: del loading

---
 client/src/pages/kb/components/DataCard.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/kb/components/DataCard.tsx b/client/src/pages/kb/components/DataCard.tsx
index d7d3648dd..2d98b17c9 100644
--- a/client/src/pages/kb/components/DataCard.tsx
+++ b/client/src/pages/kb/components/DataCard.tsx
@@ -29,6 +29,7 @@ import Papa from 'papaparse';
 import dynamic from 'next/dynamic';
 import InputModal, { FormData as InputDataType } from './InputDataModal';
 import { debounce } from 'lodash';
+import { getErrText } from '@/utils/tools';
 
 const SelectFileModal = dynamic(() => import('./SelectFileModal'));
 const SelectCsvModal = dynamic(() => import('./SelectCsvModal'));
@@ -37,6 +38,7 @@ const DataCard = ({ kbId }: { kbId: string }) => {
   const lastSearch = useRef('');
   const [searchText, setSearchText] = useState('');
   const { toast } = useToast();
+  const [isDeleting, setIsDeleting] = useState(false);
 
   const {
     data: kbDataList,
@@ -219,7 +221,7 @@ const DataCard = ({ kbId }: { kbId: string }) => {
             pt={3}
             userSelect={'none'}
             boxShadow={'none'}
-            _hover={{ boxShadow: 'lg', '& .delete': { display: 'block' } }}
+            _hover={{ boxShadow: 'lg', '& .delete': { display: 'flex' } }}
             border={'1px solid '}
             borderColor={'myGray.200'}
             onClick={() =>
@@ -249,19 +251,28 @@ const DataCard = ({ kbId }: { kbId: string }) => {
               </Box>
               <IconButton
                 className="delete"
-                display={['block', 'none']}
+                display={['flex', 'none']}
                 icon={<DeleteIcon />}
                 variant={'base'}
                 colorScheme={'gray'}
                 aria-label={'delete'}
                 size={'xs'}
                 borderRadius={'md'}
-                lineHeight={1}
                 _hover={{ color: 'red.600' }}
+                isLoading={isDeleting}
                 onClick={async (e) => {
                   e.stopPropagation();
-                  await delOneKbDataByDataId(item.id);
-                  refetchData(pageNum);
+                  try {
+                    setIsDeleting(true);
+                    await delOneKbDataByDataId(item.id);
+                    refetchData(pageNum);
+                  } catch (error) {
+                    toast({
+                      title: getErrText(error),
+                      status: 'error'
+                    });
+                  }
+                  setIsDeleting(false);
                 }}
               />
             </Flex>