perf: del loading

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>