perf: add virtual list for friend list #238

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,6 +2,7 @@ import { Tabs, TabsProps } from 'antd';
 import React from 'react';
 
 import './PillTabs.less';
+import clsx from 'clsx';
 
 /**
  * @example
@@ -9,7 +10,12 @@ import './PillTabs.less';
  */
 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,8 +108,11 @@ export const FriendList: React.FC<{
         onChange={(e) => setSearchText(e.target.value)}
       />
 
-      <div>
+      <div className="flex-1">
-        {searchResult.map((item) => (
+        <Virtuoso
+          className="h-full"
+          data={searchResult}
+          itemContent={(index, item) => (
             <UserListItem
               key={item._id}
               userId={item._id}
@@ -150,7 +154,8 @@ export const FriendList: React.FC<{
                 </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([