From 7540c29ec64e0088fbb1ad4e684b4442b9ddd8d1 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Mon, 23 Oct 2023 16:30:01 +0100
Subject: [PATCH] message loading skeleton

---
 .../Chat/ChatMessage/ChatMessage.tsx          |  5 +++-
 .../LoadingMessage/LoadingMessage.module.scss |  0
 .../LoadingMessage/LoadingMessage.tsx         | 23 +++++++++++++++++++
 .../components/LoadingMessage/index.ts        |  1 +
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/shared/components/Chat/ChatMessage/components/LoadingMessage/LoadingMessage.module.scss
 create mode 100644 src/shared/components/Chat/ChatMessage/components/LoadingMessage/LoadingMessage.tsx
 create mode 100644 src/shared/components/Chat/ChatMessage/components/LoadingMessage/index.ts

diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
index c7a7274694..8885a72298 100644
--- a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
+++ b/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)}
diff --git a/src/shared/components/Chat/ChatMessage/components/LoadingMessage/LoadingMessage.module.scss b/src/shared/components/Chat/ChatMessage/components/LoadingMessage/LoadingMessage.module.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/shared/components/Chat/ChatMessage/components/LoadingMessage/LoadingMessage.tsx b/src/shared/components/Chat/ChatMessage/components/LoadingMessage/LoadingMessage.tsx
new file mode 100644
index 0000000000..1052aa9396
--- /dev/null
+++ b/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;
diff --git a/src/shared/components/Chat/ChatMessage/components/LoadingMessage/index.ts b/src/shared/components/Chat/ChatMessage/components/LoadingMessage/index.ts
new file mode 100644
index 0000000000..86fa7653e8
--- /dev/null
+++ b/src/shared/components/Chat/ChatMessage/components/LoadingMessage/index.ts
@@ -0,0 +1 @@
+export { default as LoadingMessage } from "./LoadingMessage";