⚡️ perf: improve code of user panel (#5752)

* improve code * update repos
lobehub · Feb 5, 2025 · 8903aed · 8903aed
1 parent f899c82
commit 8903aed
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 14 deletions.
diff --git a/next.config.ts b/next.config.ts
@@ -164,6 +164,12 @@ const nextConfig: NextConfig = {
       permanent: true,
       source: '/welcome',
     },
+    // we need back /repos url in the further
+    {
+      destination: '/files',
+      permanent: false,
+      source: '/repos',
+    },
   ],
   // when external packages in dev mode with turbopack, this config will lead to bundle error
   serverExternalPackages: isProd ? ['@electric-sql/pglite'] : undefined,

diff --git a/src/app/(main)/_layout/Desktop/SideBar/Avatar.tsx b/src/app/(main)/_layout/Desktop/SideBar/Avatar.tsx
@@ -1,7 +1,7 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Tooltip } from 'antd';
 import { LucideX } from 'lucide-react';
-import { memo } from 'react';
+import { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -14,10 +14,13 @@ const Avatar = memo(() => {
   const { t } = useTranslation('common');
   const hideSettingsMoveGuide = useUserStore(preferenceSelectors.hideSettingsMoveGuide);
   const updateGuideState = useUserStore((s) => s.updateGuideState);
+
   const content = (
-    <UserPanel>
-      <UserAvatar clickable />
-    </UserPanel>
+    <Suspense fallback={<UserAvatar />}>
+      <UserPanel>
+        <UserAvatar clickable />
+      </UserPanel>
+    </Suspense>
   );
 
   return hideSettingsMoveGuide ? (

diff --git a/src/app/(main)/repos/page.tsx b/src/app/(main)/repos/page.tsx
diff --git a/src/features/User/UserInfo.tsx b/src/features/User/UserInfo.tsx
@@ -24,9 +24,10 @@ const useStyles = createStyles(({ css, token }) => ({
 
 export interface UserInfoProps extends FlexboxProps {
   avatarProps?: Partial<UserAvatarProps>;
+  onClick?: () => void;
 }
 
-const UserInfo = memo<UserInfoProps>(({ avatarProps, ...rest }) => {
+const UserInfo = memo<UserInfoProps>(({ avatarProps, onClick, ...rest }) => {
   const { styles, theme } = useStyles();
   const isSignedIn = useUserStore(authSelectors.isLogin);
   const [nickname, username] = useUserStore((s) => [
@@ -44,7 +45,7 @@ const UserInfo = memo<UserInfoProps>(({ avatarProps, ...rest }) => {
       paddingInline={12}
       {...rest}
     >
-      <Flexbox align={'center'} gap={12} horizontal>
+      <Flexbox align={'center'} gap={12} horizontal onClick={onClick}>
         <UserAvatar background={theme.colorFill} size={48} {...avatarProps} />
         <Flexbox flex={1} gap={6}>
           <div className={styles.nickname}>{nickname}</div>

diff --git a/src/features/User/UserPanel/PanelContent.tsx b/src/features/User/UserPanel/PanelContent.tsx
@@ -44,9 +44,7 @@ const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
     <Flexbox gap={2} style={{ minWidth: 300 }}>
       {!enableAuth || (enableAuth && isLoginWithAuth) ? (
         <>
-          <Link href={'/profile'} style={{ color: 'inherit' }}>
-            <UserInfo />
-          </Link>
+          <UserInfo avatarProps={{ clickable: false }} />
           {!isDeprecatedEdition && (
             <Link href={'/profile/stats'} style={{ color: 'inherit' }}>
               <DataStatistics />