From c1aff8c710460967415c69049d3a7bd01d4f3c45 Mon Sep 17 00:00:00 2001
From: euvre <93761161+euvre@users.noreply.github.com>
Date: Wed, 22 Jul 2026 19:20:48 +0800
Subject: [PATCH] fix: prevent empty-state flash on knowledge-base and chat
 list loading (#17221)

---
 web/src/hooks/use-chat-request.ts      |  2 +-
 web/src/hooks/use-knowledge-request.ts |  6 ++----
 web/src/pages/datasets/index.tsx       | 11 ++++++++++-
 web/src/pages/next-chats/index.tsx     | 15 +++++++++++----
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/web/src/hooks/use-chat-request.ts b/web/src/hooks/use-chat-request.ts
index c370e2cf90..b57378f2b3 100644
--- a/web/src/hooks/use-chat-request.ts
+++ b/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 () => {
diff --git a/web/src/hooks/use-knowledge-request.ts b/web/src/hooks/use-knowledge-request.ts
index e88c7828bb..fb5ae2b0d2 100644
--- a/web/src/hooks/use-knowledge-request.ts
+++ b/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({
diff --git a/web/src/pages/datasets/index.tsx b/web/src/pages/datasets/index.tsx
index fee6b0c6ac..2663efbacb 100644
--- a/web/src/pages/datasets/index.tsx
+++ b/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"
diff --git a/web/src/pages/next-chats/index.tsx b/web/src/pages/next-chats/index.tsx
index 9005c638c0..c27256fe8b 100644
--- a/web/src/pages/next-chats/index.tsx
+++ b/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"