perf: add virtual list for friend list #238

Author: moonrailgun

client/web/src/components/PillTabs.less

@@ -43,5 +43,13 @@
   .ant-tabs-content-holder {
     overflow-x: hidden;
     overflow-y: auto;
+
+    .ant-tabs-content {
+      height: 100%;
+
+      .ant-tabs-tabpane {
+        height: 100%;
+      }
+    }
   }
 }

client/web/src/components/PillTabs.tsx

@@ -2,14 +2,20 @@ import { Tabs, TabsProps } from 'antd';
 import React from 'react';
 
 import './PillTabs.less';
+import clsx from 'clsx';
 
 /**
  * @example
  * <PillTabs items={[...]} />
  */
 export const PillTabs: React.FC<TabsProps> = React.memo((props) => {
   return (
-    <Tabs {...props} className="pill-tabs" type="card" animated={false}>
+    <Tabs
+      {...props}
+      className={clsx(props.className, 'pill-tabs')}
+      type="card"
+      animated={false}
+    >
       {props.children}
     </Tabs>
   );

client/web/src/components/modals/GroupDetail/Member.tsx

@@ -59,7 +59,7 @@ export const GroupMember: React.FC<{ groupId: string }> = React.memo(
 
         <div className="flex-1 overflow-auto">
           <Virtuoso
-            style={{ height: '100%' }}
+            className="h-full"
             data={isSearching ? filteredGroupMembers : userInfos}
             itemContent={(index, item) => renderUser(item)}
           />

client/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx

@@ -24,6 +24,7 @@ import { Problem } from '@/components/Problem';
 import { closeModal, openModal } from '@/components/Modal';
 import { SetFriendNickname } from '@/components/modals/SetFriendNickname';
 import { Icon } from 'tailchat-design';
+import { Virtuoso } from 'react-virtuoso';
 
 /**
  * 好友列表
@@ -95,7 +96,7 @@ export const FriendList: React.FC<{
   }
 
   return (
-    <div className="py-2.5 px-5">
+    <div className="py-2.5 px-5 h-full flex flex-col">
       <div>{t('好友列表')}</div>
 
       <Input
@@ -107,50 +108,54 @@ export const FriendList: React.FC<{
         onChange={(e) => setSearchText(e.target.value)}
       />
 
-      <div>
-        {searchResult.map((item) => (
-          <UserListItem
-            key={item._id}
-            userId={item._id}
-            actions={[
-              <Tooltip key="message" title={t('发送消息')}>
-                <div>
-                  <IconBtn
-                    icon="mdi:message-text-outline"
-                    onClick={() => handleCreateConverse(item._id)}
-                  />
-                </div>
-              </Tooltip>,
-              <div key="more">
-                <Dropdown
-                  menu={{
-                    items: [
-                      {
-                        key: 'setNickname',
-                        onClick: () => handleSetFriendNickname(item._id),
-                        label: isValidStr(item.nickname)
-                          ? t('更改好友昵称')
-                          : t('添加好友昵称'),
-                      },
-                      {
-                        key: 'delete',
-                        danger: true,
-                        onClick: () => handleRemoveFriend(item._id),
-                        label: t('删除'),
-                      },
-                    ],
-                  }}
-                  trigger={['click']}
-                  placement="bottomRight"
-                >
+      <div className="flex-1">
+        <Virtuoso
+          className="h-full"
+          data={searchResult}
+          itemContent={(index, item) => (
+            <UserListItem
+              key={item._id}
+              userId={item._id}
+              actions={[
+                <Tooltip key="message" title={t('发送消息')}>
                   <div>
-                    <IconBtn icon="mdi:dots-vertical" />
+                    <IconBtn
+                      icon="mdi:message-text-outline"
+                      onClick={() => handleCreateConverse(item._id)}
+                    />
                   </div>
-                </Dropdown>
-              </div>,
-            ]}
-          />
-        ))}
+                </Tooltip>,
+                <div key="more">
+                  <Dropdown
+                    menu={{
+                      items: [
+                        {
+                          key: 'setNickname',
+                          onClick: () => handleSetFriendNickname(item._id),
+                          label: isValidStr(item.nickname)
+                            ? t('更改好友昵称')
+                            : t('添加好友昵称'),
+                        },
+                        {
+                          key: 'delete',
+                          danger: true,
+                          onClick: () => handleRemoveFriend(item._id),
+                          label: t('删除'),
+                        },
+                      ],
+                    }}
+                    trigger={['click']}
+                    placement="bottomRight"
+                  >
+                    <div>
+                      <IconBtn icon="mdi:dots-vertical" />
+                    </div>
+                  </Dropdown>
+                </div>,
+              ]}
+            />
+          )}
+        />
       </div>
     </div>
   );

client/web/src/routes/Main/Content/Personal/Friends/index.tsx

@@ -29,6 +29,7 @@ export const FriendPanel: React.FC = React.memo(() => {
   return (
     <div className="w-full">
       <PillTabs
+        className="h-full"
         activeKey={activeKey}
         onChange={setActiveKey}
         items={_compact([