fix: prevent empty-state flash on knowledge-base and chat list loading (#17221)

web/src/hooks/use-chat-request.ts

@@ -81,7 +81,7 @@ export const useFetchChatList = () => {
         ...pagination,
       },
     ],
-    initialData: { chats: [], total: 0 },
+    placeholderData: (previousData) => previousData ?? { chats: [], total: 0 },
     gcTime: 0,
     refetchOnWindowFocus: false,
     queryFn: async () => {

web/src/hooks/use-knowledge-request.ts

@@ -169,10 +169,8 @@ export const useFetchNextKnowledgeListByPage = () => {
         filterValue,
       },
     ],
-    initialData: {
-      kbs: [],
-      total_datasets: 0,
-    },
+    placeholderData: (previousData) =>
+      previousData ?? { kbs: [], total_datasets: 0 },
     gcTime: 0,
     queryFn: async () => {
       const { data } = await listDataset({

web/src/pages/datasets/index.tsx

@@ -5,6 +5,7 @@ import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
+import { Spin } from '@/components/ui/spin';
 import { useFetchNextKnowledgeListByPage } from '@/hooks/use-knowledge-request';
 import { useQueryClient } from '@tanstack/react-query';
 import { pick } from 'lodash';
@@ -37,6 +38,7 @@ export default function Datasets() {
     searchString,
     filterValue,
     handleFilterSubmit,
+    loading,
   } = useFetchNextKnowledgeListByPage();
 
   const owners = useSelectOwners();
@@ -70,7 +72,14 @@ export default function Datasets() {
 
   return (
     <>
-      {kbs?.length || searchString ? (
+      {loading && !kbs?.length ? (
+        <article
+          className="size-full flex items-center justify-center"
+          data-testid="datasets-list"
+        >
+          <Spin size="large" />
+        </article>
+      ) : kbs?.length || searchString ? (
         <article
           className="size-full min-w-0 flex flex-col"
           data-testid="datasets-list"

web/src/pages/next-chats/index.tsx

@@ -5,6 +5,7 @@ import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
+import { Spin } from '@/components/ui/spin';
 import { useFetchChatList } from '@/hooks/use-chat-request';
 import { buildOwnersFilter } from '@/utils/list-filter-util';
 import { pick } from 'lodash';
@@ -25,12 +26,11 @@ export default function ChatList() {
     searchString,
     filterValue,
     handleFilterSubmit,
+    loading,
   } = useFetchChatList();
   const { t } = useTranslation();
   const { t: tc } = useTranslation('common');
-  const owners = [
-    buildOwnersFilter(data?.chats ?? [], undefined, tc('owner')),
-  ];
+  const owners = [buildOwnersFilter(data?.chats ?? [], undefined, tc('owner'))];
   const {
     initialChatName,
     chatRenameVisible,
@@ -103,7 +103,14 @@ export default function ChatList() {
 
   return (
     <>
-      {data.chats?.length || searchString ? (
+      {loading && !data.chats?.length ? (
+        <article
+          className="size-full flex items-center justify-center"
+          data-testid="chats-list"
+        >
+          <Spin size="large" />
+        </article>
+      ) : data.chats?.length || searchString ? (
         <article
           className="size-full min-w-0 flex flex-col"
           data-testid="chats-list"