From 17ee00dd22aeb376bd39d1c1ec2f29a80ee6bc29 Mon Sep 17 00:00:00 2001
From: Kiryl Budnik <kirill.bubnik.95@gmail.com>
Date: Wed, 1 Nov 2023 14:56:34 +0100
Subject: [PATCH] show "loading" label only when message data is being fetched

---
 .../Chat/ChatMessage/ChatMessage.tsx          | 51 +++++++++++--------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
index 76fe7c0841..1a1954ee95 100644
--- a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
+++ b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import classNames from "classnames";
 import { useLongPress } from "use-long-press";
+import { Logger } from "@/services";
 import {
   ElementDropdown,
   UserAvatar,
@@ -110,6 +111,7 @@ export default function ChatMessage({
     !isUserDiscussionMessage || userId !== discussionMessageUserId;
 
   const [messageText, setMessageText] = useState<(string | JSX.Element)[]>([]);
+  const [isMessageDataFetching, setIsMessageDataFetching] = useState(false);
 
   const [replyMessageText, setReplyMessageText] = useState<
     (string | JSX.Element)[]
@@ -144,26 +146,35 @@ export default function ChatMessage({
       const emojiCount = countTextEditorEmojiElements(
         parseStringToTextEditorValue(discussionMessage.text),
       );
-      const parsedText = await getTextFromTextEditorString({
-        textEditorString: discussionMessage.text,
-        users,
-        mentionTextClassName: !isNotCurrentUserMessage
-          ? styles.mentionTextCurrentUser
-          : "",
-        emojiTextClassName: classNames({
-          [styles.singleEmojiText]: emojiCount.isSingleEmoji,
-          [styles.multipleEmojiText]: emojiCount.isMultipleEmoji,
-        }),
-        commonId: discussionMessage.commonId,
-        systemMessage: isSystemMessage ? discussionMessage : undefined,
-        getCommonPagePath,
-        getCommonPageAboutTabPath,
-        directParent,
-        onUserClick,
-        onFeedItemClick,
-      });
 
-      setMessageText(parsedText);
+      setIsMessageDataFetching(true);
+
+      try {
+        const parsedText = await getTextFromTextEditorString({
+          textEditorString: discussionMessage.text,
+          users,
+          mentionTextClassName: !isNotCurrentUserMessage
+            ? styles.mentionTextCurrentUser
+            : "",
+          emojiTextClassName: classNames({
+            [styles.singleEmojiText]: emojiCount.isSingleEmoji,
+            [styles.multipleEmojiText]: emojiCount.isMultipleEmoji,
+          }),
+          commonId: discussionMessage.commonId,
+          systemMessage: isSystemMessage ? discussionMessage : undefined,
+          getCommonPagePath,
+          getCommonPageAboutTabPath,
+          directParent,
+          onUserClick,
+          onFeedItemClick,
+        });
+
+        setMessageText(parsedText);
+      } catch (error) {
+        Logger.error(error);
+      } finally {
+        setIsMessageDataFetching(false);
+      }
     })();
   }, [
     users,
@@ -400,7 +411,7 @@ export default function ChatMessage({
                 <ChatMessageLinkify
                   onInternalLinkClick={handleInternalLinkClick}
                 >
-                  {!messageText.length ? (
+                  {!messageText.length && isMessageDataFetching ? (
                     <i>Loading...</i>
                   ) : (
                     messageText.map((text) => text)