From 827ef76b16e4bd89e2cd8a5b059a9c1dcd475c86 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Mon, 10 Apr 2023 09:42:58 +0800
Subject: [PATCH] fix: blank message placeholder

---
 src/common/component/Message/index.tsx              | 2 +-
 src/routes/chat/Layout/VirtualMessageFeed/index.tsx | 2 +-
 src/routes/chat/utils.tsx                           | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/common/component/Message/index.tsx b/src/common/component/Message/index.tsx
index 4cffb506..2c073d82 100644
--- a/src/common/component/Message/index.tsx
+++ b/src/common/component/Message/index.tsx
@@ -63,7 +63,7 @@ const Message: FC<IProps> = ({
       }
     }
   }, [mid, read]);
-  if (!message) return null;
+  if (!message) return <div className="w-full h-[1px] invisible"></div>;
   const {
     reply_mid,
     from_uid: fromUid,
diff --git a/src/routes/chat/Layout/VirtualMessageFeed/index.tsx b/src/routes/chat/Layout/VirtualMessageFeed/index.tsx
index 41c23a3a..4f8f754b 100644
--- a/src/routes/chat/Layout/VirtualMessageFeed/index.tsx
+++ b/src/routes/chat/Layout/VirtualMessageFeed/index.tsx
@@ -124,7 +124,7 @@ const VirtualMessageFeed = ({ context, id }: Props) => {
                 // 计算出真正的index
                 // const idx = index - firstItemIndex;
                 const curr = messageData[mid];
-                if (!curr) return null;
+                if (!curr) return <div className='w-full h-[1px] invisible'></div>;
                 const isFirst = idx == 0;
                 const prev = isFirst ? null : messageData[mids[idx - 1]];
                 const read = curr?.from_uid == loginUser?.uid || mid <= readIndex;
diff --git a/src/routes/chat/utils.tsx b/src/routes/chat/utils.tsx
index 7c092cbb..7d01a6d2 100644
--- a/src/routes/chat/utils.tsx
+++ b/src/routes/chat/utils.tsx
@@ -105,7 +105,6 @@ const MessageWrapper = ({ selectMode = false, context, id, mid, divider, childre
     <div className={`group flex flex-col items-start gap-2 relative w-full `} {...rest}>
       {divider}
       <div className={`w-full flex items-center ${selectMode ? "group-hover:bg-slate-100 dark:group-hover:bg-slate-900" : ""}`}>
-
         {selectMode && <Checkbox className="!ml-2" checked={selected} />}
         {children}
       </div>
@@ -135,7 +134,7 @@ export const renderMessageFragment = ({
   contextId = 0,
   context = "user"
 }: Params) => {
-  if (!curr) return null;
+  if (!curr) return <div className="w-full h-[1px] invisible"></div>;
   let { created_at, mid } = curr;
   const local_id = curr.properties?.local_id;
   let divider = null;