From e227602b09faf0082b90a5c213c3d975f8eed000 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 31 May 2022 19:37:08 +0800
Subject: [PATCH] style: add animal for chatbox placeholder

---
 .../components/ChatBox/ChatBoxPlaceholder.tsx | 70 ++++++++++++++++---
 1 file changed, 60 insertions(+), 10 deletions(-)

diff --git a/web/src/components/ChatBox/ChatBoxPlaceholder.tsx b/web/src/components/ChatBox/ChatBoxPlaceholder.tsx
index 17323068..d1047725 100644
--- a/web/src/components/ChatBox/ChatBoxPlaceholder.tsx
+++ b/web/src/components/ChatBox/ChatBoxPlaceholder.tsx
@@ -6,16 +6,66 @@ export const ChatBoxPlaceholder: React.FC = React.memo(() => {
 
   return (
     <div className="px-2 w-2/3">
-      <Skeleton className="mb-2" avatar={true} paragraph={paragraph} />
-      <Skeleton className="mb-2" avatar={true} paragraph={paragraph} />
-      <Skeleton className="mb-2" avatar={true} paragraph={paragraph} />
-      <Skeleton className="mb-2" avatar={true} paragraph={paragraph} />
-      <Skeleton className="mb-2" avatar={true} paragraph={paragraph} />
-      <Skeleton className="mb-2" avatar={true} paragraph={paragraph} />
-      <Skeleton className="mb-2" avatar={true} paragraph={paragraph} />
-      <Skeleton className="mb-2" avatar={true} paragraph={paragraph} />
-      <Skeleton className="mb-2" avatar={true} paragraph={paragraph} />
-      <Skeleton className="mb-2" avatar={true} paragraph={paragraph} />
+      <Skeleton
+        className="mb-2"
+        active={true}
+        avatar={true}
+        paragraph={paragraph}
+      />
+      <Skeleton
+        className="mb-2"
+        active={true}
+        avatar={true}
+        paragraph={paragraph}
+      />
+      <Skeleton
+        className="mb-2"
+        active={true}
+        avatar={true}
+        paragraph={paragraph}
+      />
+      <Skeleton
+        className="mb-2"
+        active={true}
+        avatar={true}
+        paragraph={paragraph}
+      />
+      <Skeleton
+        className="mb-2"
+        active={true}
+        avatar={true}
+        paragraph={paragraph}
+      />
+      <Skeleton
+        className="mb-2"
+        active={true}
+        avatar={true}
+        paragraph={paragraph}
+      />
+      <Skeleton
+        className="mb-2"
+        active={true}
+        avatar={true}
+        paragraph={paragraph}
+      />
+      <Skeleton
+        className="mb-2"
+        active={true}
+        avatar={true}
+        paragraph={paragraph}
+      />
+      <Skeleton
+        className="mb-2"
+        active={true}
+        avatar={true}
+        paragraph={paragraph}
+      />
+      <Skeleton
+        className="mb-2"
+        active={true}
+        avatar={true}
+        paragraph={paragraph}
+      />
     </div>
   );
 });