feat: Use Spin to wrap the chunk list on the search page #2247 (#2409)

### What problem does this PR solve?

feat: Use Spin to wrap the chunk list on the search page #2247
### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/pages/search/hooks.ts

@@ -25,24 +25,39 @@ export const useSendQuestion = (kbIds: string[]) => {
   const [isFirstRender, setIsFirstRender] = useState(true);
   const [selectedDocumentIds, setSelectedDocumentIds] = useState<string[]>([]);
 
-  const { pagination } = useGetPaginationWithRouter();
+  const { pagination, setPagination } = useGetPaginationWithRouter();
 
   const sendQuestion = useCallback(
     (question: string) => {
       const q = trim(question);
       if (isEmpty(q)) return;
+      setPagination({ page: 1 });
       setIsFirstRender(false);
       setCurrentAnswer({} as IAnswer);
       setSendingLoading(true);
       send({ kb_ids: kbIds, question: q });
-      testChunk({ kb_id: kbIds, highlight: true, question: q });
+      testChunk({
+        kb_id: kbIds,
+        highlight: true,
+        question: q,
+        page: 1,
+        size: pagination.pageSize,
+      });
       fetchMindMap({
         question: q,
         kb_ids: kbIds,
       });
       fetchRelatedQuestions(q);
     },
-    [send, testChunk, kbIds, fetchRelatedQuestions, fetchMindMap],
+    [
+      send,
+      testChunk,
+      kbIds,
+      fetchRelatedQuestions,
+      fetchMindMap,
+      setPagination,
+      pagination.pageSize,
+    ],
   );
 
   const handleSearchStrChange: ChangeEventHandler<HTMLInputElement> =

web/src/pages/search/index.less

@@ -3,6 +3,7 @@
   background-size: cover;
   .card {
     width: 100%;
+    cursor: pointer;
     :global(.ant-card-body) {
       padding: 14px;
     }

web/src/pages/search/index.tsx

@@ -22,6 +22,7 @@ import {
   Popover,
   Skeleton,
   Space,
+  Spin,
   Tag,
 } from 'antd';
 import { useMemo, useState } from 'react';
@@ -139,10 +140,10 @@ const SearchPage = () => {
                     onTesting={handleTestChunk}
                   ></RetrievalDocuments>
                   <Divider></Divider>
+                  <Spin spinning={loading}>
                     {chunks.length > 0 && (
                       <List
                         dataSource={chunks}
-                      loading={loading}
                         className={styles.chunks}
                         renderItem={(item) => (
                           <List.Item>
@@ -177,6 +178,7 @@ const SearchPage = () => {
                         )}
                       />
                     )}
+                  </Spin>
                   {relatedQuestions?.length > 0 && (
                     <Card title={t('chat.relatedQuestion')}>
                       <Flex wrap="wrap" gap={'10px 0'}>