refactor: 重构消息列表的实现以解决消息列表抖动

.gitignore

@@ -11,6 +11,7 @@
 
 # production
 /build
+/data
 /src-tauri/target
 
 # misc

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.9.71",
+  "version": "0.9.72",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@metamask/onboarding": "^1.0.1",
@@ -80,6 +80,7 @@
     "tailwind-merge": "2.5.4",
     "terser-webpack-plugin": "^5.3.14",
     "tippy.js": "^6.3.7",
+    "virtua": "^0.49.0",
     "wavesurfer.js": "^7.10.1",
     "webpack": "^5.101.0",
     "webpack-dev-server": "^4.15.1",

src/components/Message/ContextMenu.tsx

@@ -112,6 +112,7 @@ const MessageContextMenu: FC<Props> = ({
         interactive
         placement="right-start"
         popperOptions={{ strategy: "fixed" }}
+        appendTo={() => document.body}
         onClickOutside={hide}
         key={mid}
         content={<ContextMenu hideMenu={hide} items={items} />}

src/components/Message/index.tsx

@@ -131,6 +131,7 @@ const Message: FC<IProps> = ({
         interactive
         placement="right"
         trigger="click"
+        appendTo={() => document.body}
         content={<Profile uid={fromUid || 0} type="card" cid={context == "dm" ? 0 : contextId} />}
       >
         <div className="cursor-pointer w-10 h-10 shrink-0" data-uid={fromUid} ref={avatarRef}>

src/routes/chat/Layout/VirtualMessageFeed/CustomHeader.tsx

@@ -1,7 +1,5 @@
 import { useTranslation } from "react-i18next";
 import { NavLink, useLocation } from "react-router-dom";
-import { Waveform } from "@uiball/loaders";
-import clsx from "clsx";
 
 import { useAppSelector } from "@/app/store";
 import EditIcon from "@/assets/icons/edit.svg";
@@ -42,23 +40,15 @@ const ChannelHeader = ({ cid }: ChannelHeaderProps) => {
 };
 
 type Props = {
-  context?: {
+  context: {
     id: number;
     isChannel: boolean;
     loadingMore: boolean;
   };
 };
 const CustomHeader = ({ context }: Props) => {
-  if (!context) return null;
-  const { id, isChannel, loadingMore } = context;
-  return (
-    <>
-      {isChannel ? <ChannelHeader cid={id} /> : null}
-      <div className={clsx("mt-2 w-full py-2 ", loadingMore ? "flex-center" : "hidden")}>
-        <Waveform size={18} lineWeight={4} speed={1} color="#ccc" />
-      </div>
-    </>
-  );
+  const { id, isChannel } = context;
+  return isChannel ? <ChannelHeader cid={id} /> : null;
 };
 
 export default CustomHeader;