message loading skeleton

src/shared/components/Chat/ChatMessage/ChatMessage.tsx

@@ -45,6 +45,7 @@ import { StaticLinkType, isRtlText, getUserName } from "@/shared/utils";
 import { convertBytes } from "@/shared/utils/convertBytes";
 import { EditMessageInput } from "../EditMessageInput";
 import { ChatMessageLinkify, InternalLinkData, Time } from "./components";
+import { LoadingMessage } from "./components/LoadingMessage";
 import { getTextFromTextEditorString } from "./utils";
 import styles from "./ChatMessage.module.scss";
 
@@ -350,7 +351,9 @@ export default function ChatMessage({
     [discussionMessage.files],
   );
 
-  return (
+  return !messageText.length ? (
+    <LoadingMessage backgroundColor={isSystemMessage ? "#f3d4eb" : "#a75a93"} />
+  ) : (
     <li
       id={discussionMessage.id}
       className={classNames(styles.container, className)}

src/shared/components/Chat/ChatMessage/components/LoadingMessage/LoadingMessage.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import ContentLoader from "react-content-loader";
+
+interface LoadingMessageProps {
+  backgroundColor: string;
+}
+
+const LoadingMessage = (props: LoadingMessageProps) => {
+  return (
+    <ContentLoader
+      speed={2}
+      width="100%"
+      height={22}
+      viewBox="0 0 296 22"
+      foregroundColor="#ecebeb"
+      {...props}
+    >
+      <rect x="0" y="0" rx="4" ry="4" width="100%" height="22" />
+    </ContentLoader>
+  );
+};
+
+export default LoadingMessage;

src/shared/components/Chat/ChatMessage/components/LoadingMessage/index.ts

@@ -0,0 +1 @@
+export { default as LoadingMessage } from "./LoadingMessage";