💄 style: 优化水合前的加载效果

lobehub · Aug 10, 2023 · 6bbd978 · 6bbd978
1 parent 1781119
commit 6bbd978
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 52 deletions.
diff --git a/src/pages/chat/[id]/Conversation/ChatList/index.tsx b/src/pages/chat/[id]/Conversation/ChatList/index.tsx
@@ -5,7 +5,12 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
+import {
+  agentSelectors,
+  chatSelectors,
+  useSessionHydrated,
+  useSessionStore,
+} from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
 import { ErrorType } from '@/types/fetch';
 import { isFunctionMessage } from '@/utils/message';
@@ -29,7 +34,9 @@ const renderErrorMessage: RenderErrorMessage = (error, message) => {
 
 const List = () => {
   const { t } = useTranslation('common');
+  const hydrated = useSessionHydrated();
   const data = useSessionStore(chatSelectors.currentChats, isEqual);
+  console.log(hydrated, data);
   const [displayMode, chatLoadingId, deleteMessage, resendMessage, dispatchMessage] =
     useSessionStore(
       (s) => [

diff --git a/src/pages/chat/[id]/Header/index.tsx b/src/pages/chat/[id]/Header/index.tsx
@@ -1,5 +1,6 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
 import { ActionIcon, Avatar, ChatHeader } from '@lobehub/ui';
+import { Skeleton } from 'antd';
 import { PanelRightClose, PanelRightOpen, Settings } from 'lucide-react';
 import Router from 'next/router';
 import { memo } from 'react';
@@ -9,12 +10,13 @@ import { shallow } from 'zustand/shallow';
 
 import HeaderTitle from '@/components/HeaderTitle';
 import Tag from '@/components/Tag';
-import { agentSelectors, useSessionStore } from '@/store/session';
+import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
 
 import PluginTag from './PluginTag';
 
 const Header = memo(() => {
+  const init = useSessionHydrated();
   const { t } = useTranslation('common');
 
   const [title, description, avatar, backgroundColor, id, model, plugins] = useSessionStore(
@@ -38,31 +40,43 @@ const Header = memo(() => {
   return (
     <ChatHeader
       left={
-        <Flexbox align={'flex-start'} horizontal>
-          <Avatar
-            avatar={avatar}
-            background={backgroundColor}
-            onClick={() => {
-              Router.push(`/chat/${id}/setting`);
-            }}
-            size={40}
-            style={{ cursor: 'pointer', flex: 'none' }}
-            title={title}
-          />
-          <HeaderTitle
-            desc={description}
-            tag={
-              <>
-                <Tag>
-                  <SiOpenai size={'11px'} style={{ marginTop: 3 }} />
-                  {model}
-                </Tag>
-                {plugins?.length > 0 && <PluginTag plugins={plugins} />}
-              </>
-            }
-            title={title}
-          />
-        </Flexbox>
+        !init ? (
+          <Flexbox horizontal>
+            <Skeleton
+              active
+              avatar={{ shape: 'circle', size: 'default' }}
+              paragraph={false}
+              round
+              title={{ style: { margin: 0, marginTop: 8 }, width: 200 }}
+            />
+          </Flexbox>
+        ) : (
+          <Flexbox align={'flex-start'} gap={12} horizontal>
+            <Avatar
+              avatar={avatar}
+              background={backgroundColor}
+              onClick={() => {
+                Router.push(`/chat/${id}/setting`);
+              }}
+              size={40}
+              style={{ cursor: 'pointer', flex: 'none' }}
+              title={title}
+            />
+            <HeaderTitle
+              desc={description}
+              tag={
+                <>
+                  <Tag>
+                    <SiOpenai size={'11px'} style={{ marginTop: 3 }} />
+                    {model}
+                  </Tag>
+                  {plugins?.length > 0 && <PluginTag plugins={plugins} />}
+                </>
+              }
+              title={title}
+            />
+          </Flexbox>
+        )
       }
       right={
         id && (

diff --git a/src/pages/chat/[id]/Sidebar/Inner.tsx b/src/pages/chat/[id]/Sidebar/Inner.tsx
@@ -1,12 +1,13 @@
 import { ActionIcon, DraggablePanelBody, EditableMessage, SearchBar } from '@lobehub/ui';
+import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { Maximize2Icon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { agentSelectors, useSessionStore } from '@/store/session';
+import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
 import Header from './Header';
 import { Topic } from './Topic';
@@ -21,13 +22,7 @@ const useStyles = createStyles(({ css, token }) => ({
   prompt: css`
     overflow-x: hidden;
     overflow-y: auto;
-
-    height: 200px;
-    padding: 0 16px 16px;
-
     opacity: 0.75;
-    border-bottom: 1px solid ${token.colorBorder};
-
     transition: opacity 200ms ${token.motionEaseOut};
 
     &:hover {
@@ -38,6 +33,9 @@ const useStyles = createStyles(({ css, token }) => ({
     font-size: ${token.fontSizeHeading4}px;
     font-weight: bold;
   `,
+  topic: css`
+    border-top: 1px solid ${token.colorBorder};
+  `,
 }));
 
 const Inner = memo(() => {
@@ -48,6 +46,7 @@ const Inner = memo(() => {
     shallow,
   );
 
+  const hydrated = useSessionHydrated();
   const { t } = useTranslation('common');
   return (
     <DraggablePanelBody style={{ padding: 0 }}>
@@ -62,24 +61,30 @@ const Inner = memo(() => {
         }
         title={t('settingAgent.prompt.title', { ns: 'setting' })}
       />
-      <EditableMessage
-        classNames={{ markdown: styles.prompt }}
-        onChange={(e) => {
-          updateAgentConfig({ systemRole: e });
-        }}
-        onOpenChange={setOpenModal}
-        openModal={openModal}
-        placeholder={`${t('settingAgent.prompt.placeholder', { ns: 'setting' })}...`}
-        styles={{ markdown: systemRole ? {} : { opacity: 0.5 } }}
-        text={{
-          cancel: t('cancel'),
-          confirm: t('ok'),
-          edit: t('edit'),
-          title: t('settingAgent.prompt.title', { ns: 'setting' }),
-        }}
-        value={systemRole}
-      />
-      <Flexbox gap={16} style={{ padding: 16 }}>
+      <Flexbox height={200} padding={'0 16px 16px'}>
+        {hydrated ? (
+          <EditableMessage
+            classNames={{ markdown: styles.prompt }}
+            onChange={(e) => {
+              updateAgentConfig({ systemRole: e });
+            }}
+            onOpenChange={setOpenModal}
+            openModal={openModal}
+            placeholder={`${t('settingAgent.prompt.placeholder', { ns: 'setting' })}...`}
+            styles={{ markdown: systemRole ? {} : { opacity: 0.5 } }}
+            text={{
+              cancel: t('cancel'),
+              confirm: t('ok'),
+              edit: t('edit'),
+              title: t('settingAgent.prompt.title', { ns: 'setting' }),
+            }}
+            value={systemRole}
+          />
+        ) : (
+          <Skeleton active avatar={false} style={{ marginTop: 12 }} title={false} />
+        )}
+      </Flexbox>
+      <Flexbox className={styles.topic} gap={16} padding={16}>
         <SearchBar placeholder={t('topic.searchPlaceholder')} spotlight type={'ghost'} />
         <Topic />
       </Flexbox>