⚡️ perf: improve chat session performance (lobehub#2613)

* 🎨 chore: improve initial state

* ⚡️ perf: improve session performance

src/app/(main)/chat/@session/default.tsx

@@ -1,17 +1,23 @@
+import { Suspense, lazy } from 'react';
+
 import ServerLayout from '@/components/server/ServerLayout';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
 import SessionHydration from './features/SessionHydration';
-import SessionListContent from './features/SessionListContent';
+import SkeletonList from './features/SkeletonList';
+
+const SessionListContent = lazy(() => import('./features/SessionListContent'));
 
 const Layout = ServerLayout({ Desktop, Mobile });
 
 const Session = () => {
   return (
     <>
       <Layout>
-        <SessionListContent />
+        <Suspense fallback={<SkeletonList />}>
+          <SessionListContent />
+        </Suspense>
       </Layout>
       <SessionHydration />
     </>

src/app/(main)/chat/@session/features/SessionListContent/List/index.tsx

@@ -12,7 +12,7 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { LobeAgentSession } from '@/types/session';
 
-import SkeletonList from '../SkeletonList';
+import SkeletonList from '../../SkeletonList';
 import AddButton from './AddButton';
 import SessionItem from './Item';
 

src/app/(main)/chat/@session/features/SessionListContent/SearchMode.tsx

@@ -2,8 +2,8 @@ import { memo } from 'react';
 
 import { useSessionStore } from '@/store/session';
 
+import SkeletonList from '../SkeletonList';
 import SessionList from './List';
-import SkeletonList from './SkeletonList';
 
 const SearchMode = memo(() => {
   const [sessionSearchKeywords, useSearchSessions] = useSessionStore((s) => [

src/app/(main)/chat/@session/features/SessionListContent/SkeletonList.tsx → src/app/(main)/chat/@session/features/SkeletonList.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';

src/store/session/slices/session/action.ts

@@ -194,6 +194,10 @@ export const createSessionSlice: StateCreator<
 
   useFetchSessions: () =>
     useClientDataSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getGroupedSessions, {
+      fallbackData: {
+        sessionGroups: [],
+        sessions: [],
+      },
       onSuccess: (data) => {
         if (
           get().isSessionsFirstFetchFinished &&
@@ -209,6 +213,7 @@ export const createSessionSlice: StateCreator<
         );
         set({ isSessionsFirstFetchFinished: true }, false, n('useFetchSessions/onSuccess', data));
       },
+      suspense: true,
     }),
   useSearchSessions: (keyword) =>
     useSWR<LobeSessions>(

src/store/session/slices/session/initialState.ts

@@ -1,18 +1,16 @@
-import { CustomSessionGroup, LobeAgentSession, LobeSessionGroups } from '@/types/session';
+import { LobeAgentSession } from '@/types/session';
 
 export interface SessionState {
   /**
    * @title 当前活动的会话
    * @description 当前正在编辑或查看的会话
    */
   activeId: string;
-  customSessionGroups: CustomSessionGroup[];
   defaultSessions: LobeAgentSession[];
   isSearching: boolean;
   isSessionsFirstFetchFinished: boolean;
   pinnedSessions: LobeAgentSession[];
   searchKeywords: string;
-  sessionGroups: LobeSessionGroups;
   sessionSearchKeywords?: string;
   /**
    * it means defaultSessions
@@ -22,12 +20,10 @@ export interface SessionState {
 
 export const initialSessionState: SessionState = {
   activeId: 'inbox',
-  customSessionGroups: [],
   defaultSessions: [],
   isSearching: false,
   isSessionsFirstFetchFinished: false,
   pinnedSessions: [],
   searchKeywords: '',
-  sessionGroups: [],
   sessions: [],
 };

src/store/session/slices/sessionGroup/initialState.ts

@@ -1,5 +1,12 @@
+import { CustomSessionGroup, LobeSessionGroups } from '@/types/session';
+
 export interface SessionGroupState {
   activeGroupId?: string;
+  customSessionGroups: CustomSessionGroup[];
+  sessionGroups: LobeSessionGroups;
 }
 
-export const initSessionGroupState: SessionGroupState = {};
+export const initSessionGroupState: SessionGroupState = {
+  customSessionGroups: [],
+  sessionGroups: [],
+};