@lobehub/chat 1.88.3 → 1.88.4

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 # Changelog
 
+### [Version 1.88.4](https://github.com/lobehub/lobe-chat/compare/v1.88.3...v1.88.4)
+
+<sup>Released on **2025-05-25**</sup>
+
+#### 🐛 Bug Fixes
+
+- **docs**: Rename and update Google Gemini documentation.
+
+#### 💄 Styles
+
+- **misc**: Improve thread flicker when first-time loading.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **docs**: Rename and update Google Gemini documentation, closes [#7957](https://github.com/lobehub/lobe-chat/issues/7957) ([432c28d](https://github.com/lobehub/lobe-chat/commit/432c28d))
+
+#### Styles
+
+- **misc**: Improve thread flicker when first-time loading, closes [#7963](https://github.com/lobehub/lobe-chat/issues/7963) ([4cacacd](https://github.com/lobehub/lobe-chat/commit/4cacacd))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.88.3](https://github.com/lobehub/lobe-chat/compare/v1.88.2...v1.88.3)
 
 <sup>Released on **2025-05-25**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Improve thread flicker when first-time loading."
+      ]
+    },
+    "date": "2025-05-25",
+    "version": "1.88.4"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.88.3",
+  "version": "1.88.4",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/(main)/chat/(workspace)/@topic/features/TopicListContent/ThreadList/index.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+
+import { useFetchThreads } from '@/hooks/useFetchThreads';
+import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/selectors';
+
+import ThreadItem from '../ThreadItem';
+
+const ThreadList = memo(() => {
+  const [id] = useChatStore((s) => [s.activeTopicId]);
+  const threads = useChatStore(threadSelectors.getThreadsByTopic(id));
+
+  useFetchThreads(id);
+
+  return threads?.map((item, index) => (
+    <ThreadItem id={item.id} index={index} key={item.id} title={item.title} />
+  ));
+});
+
+ThreadList.displayName = 'ThreadList';
+
+export default ThreadList;

package/src/app/[variants]/(main)/chat/(workspace)/@topic/features/TopicListContent/TopicItem/index.tsx

@@ -1,12 +1,12 @@
+import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
-import { memo, useState } from 'react';
+import { Suspense, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
-import { threadSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
 
-import ThreadItem from '../ThreadItem';
+import ThreadList from '../ThreadList';
 import DefaultContent from './DefaultContent';
 import TopicContent from './TopicContent';
 
@@ -54,8 +54,6 @@ const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav, threadId }) =
   const [toggleTopic] = useChatStore((s) => [s.switchTopic]);
   const [isHover, setHovering] = useState(false);
 
-  const threads = useChatStore(threadSelectors.getThreadsByTopic(id));
-
   return (
     <Flexbox style={{ position: 'relative' }}>
       <Flexbox
@@ -80,10 +78,18 @@ const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav, threadId }) =
           <TopicContent fav={fav} id={id} showMore={isHover} title={title} />
         )}
       </Flexbox>
-      {active &&
-        threads?.map((item, index) => (
-          <ThreadItem id={item.id} index={index} key={item.id} title={item.title} />
-        ))}
+      {active && (
+        <Suspense
+          fallback={
+            <Flexbox gap={8} paddingBlock={8} paddingInline={24} width={'100%'}>
+              <Skeleton.Button active size={'small'} style={{ height: 18, width: '100%' }} />
+              <Skeleton.Button active size={'small'} style={{ height: 18, width: '100%' }} />
+            </Flexbox>
+          }
+        >
+          <ThreadList />
+        </Suspense>
+      )}
     </Flexbox>
   );
 });

package/src/hooks/useFetchTopics.ts

@@ -1,4 +1,3 @@
-import { useFetchThreads } from '@/hooks/useFetchThreads';
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
@@ -9,9 +8,8 @@ import { useSessionStore } from '@/store/session';
  */
 export const useFetchTopics = () => {
   const [sessionId] = useSessionStore((s) => [s.activeId]);
-  const [activeTopicId, useFetchTopics] = useChatStore((s) => [s.activeTopicId, s.useFetchTopics]);
+  const useFetchTopics = useChatStore((s) => s.useFetchTopics);
   const isDBInited = useGlobalStore(systemStatusSelectors.isDBInited);
 
   useFetchTopics(isDBInited, sessionId);
-  useFetchThreads(activeTopicId);
 };

package/src/store/chat/slices/thread/action.ts

@@ -215,8 +215,6 @@ export const chatThreadMessage: StateCreator<
       enable && !!topicId && !isDeprecatedEdition ? [SWR_USE_FETCH_THREADS, topicId] : null,
       async ([, topicId]: [string, string]) => threadService.getThreads(topicId),
       {
-        suspense: true,
-        fallbackData: [],
         onSuccess: (threads) => {
           const nextMap = { ...get().threadMaps, [topicId!]: threads };