From 506fa7ca00bfac0c25dc2d730b70620042468c20 Mon Sep 17 00:00:00 2001
From: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Date: Fri, 22 Mar 2024 10:54:01 -0300
Subject: [PATCH] fix: Layout shift on room body when loading uikit messages
(#31894)
Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>
---
.changeset/long-phones-reflect.md | 5 +++++
.../client/components/message/uikit/UiKitMessageBlock.tsx | 8 +++-----
.../fuselage-ui-kit/src/elements/MarkdownTextElement.tsx | 8 +++++++-
packages/gazzodown/src/elements/BoldSpan.tsx | 4 +---
packages/gazzodown/src/elements/InlineElements.tsx | 2 +-
packages/gazzodown/src/elements/ItalicSpan.tsx | 4 +---
packages/gazzodown/src/elements/StrikeSpan.tsx | 4 +---
7 files changed, 19 insertions(+), 16 deletions(-)
create mode 100644 .changeset/long-phones-reflect.md
diff --git a/.changeset/long-phones-reflect.md b/.changeset/long-phones-reflect.md
new file mode 100644
index 00000000000..4c822bd2fec
--- /dev/null
+++ b/.changeset/long-phones-reflect.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+fixed a small issue that was causing the room layout to shift when loading apps messages
diff --git a/apps/meteor/client/components/message/uikit/UiKitMessageBlock.tsx b/apps/meteor/client/components/message/uikit/UiKitMessageBlock.tsx
index 3b8570e0de2..dbdd8f4e731 100644
--- a/apps/meteor/client/components/message/uikit/UiKitMessageBlock.tsx
+++ b/apps/meteor/client/components/message/uikit/UiKitMessageBlock.tsx
@@ -1,8 +1,8 @@
import type { IMessage, IRoom } from '@rocket.chat/core-typings';
-import { MessageBlock, Skeleton } from '@rocket.chat/fuselage';
+import { MessageBlock } from '@rocket.chat/fuselage';
import { UiKitComponent, UiKitMessage as UiKitMessageSurfaceRender, UiKitContext } from '@rocket.chat/fuselage-ui-kit';
import type { MessageSurfaceLayout } from '@rocket.chat/ui-kit';
-import React, { Suspense } from 'react';
+import React from 'react';
import { useMessageBlockContextValue } from '../../../uikit/hooks/useMessageBlockContextValue';
import GazzodownText from '../../GazzodownText';
@@ -20,9 +20,7 @@ const UiKitMessageBlock = ({ rid, mid, blocks }: UiKitMessageBlockProps) => {
<MessageBlock fixedWidth>
<UiKitContext.Provider value={contextValue}>
<GazzodownText>
- <Suspense fallback={<Skeleton />}>
- <UiKitComponent render={UiKitMessageSurfaceRender} blocks={blocks} />
- </Suspense>
+ <UiKitComponent render={UiKitMessageSurfaceRender} blocks={blocks} />
</GazzodownText>
</UiKitContext.Provider>
</MessageBlock>
diff --git a/packages/fuselage-ui-kit/src/elements/MarkdownTextElement.tsx b/packages/fuselage-ui-kit/src/elements/MarkdownTextElement.tsx
index 3eb04576851..21f34ada9c9 100644
--- a/packages/fuselage-ui-kit/src/elements/MarkdownTextElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/MarkdownTextElement.tsx
@@ -1,6 +1,8 @@
+import { Skeleton } from '@rocket.chat/fuselage';
import { Markup } from '@rocket.chat/gazzodown';
import { parse } from '@rocket.chat/message-parser';
import type { TextObject } from '@rocket.chat/ui-kit';
+import { Suspense } from 'react';
import { useAppTranslation } from '../hooks/useAppTranslation';
@@ -15,7 +17,11 @@ const MarkdownTextElement = ({ textObject }: { textObject: TextObject }) => {
return null;
}
- return <Markup tokens={parse(text, { emoticons: false })} />;
+ return (
+ <Suspense fallback={<Skeleton />}>
+ <Markup tokens={parse(text, { emoticons: false })} />;
+ </Suspense>
+ );
};
export default MarkdownTextElement;
diff --git a/packages/gazzodown/src/elements/BoldSpan.tsx b/packages/gazzodown/src/elements/BoldSpan.tsx
index 8ce85f4dccc..c00cd0c1d95 100644
--- a/packages/gazzodown/src/elements/BoldSpan.tsx
+++ b/packages/gazzodown/src/elements/BoldSpan.tsx
@@ -1,7 +1,7 @@
import type * as MessageParser from '@rocket.chat/message-parser';
import type { ReactElement } from 'react';
-import { lazy } from 'react';
+import CodeElement from '../code/CodeElement';
import EmojiElement from '../emoji/EmojiElement';
import ChannelMentionElement from '../mentions/ChannelMentionElement';
import UserMentionElement from '../mentions/UserMentionElement';
@@ -10,8 +10,6 @@ import LinkSpan from './LinkSpan';
import PlainSpan from './PlainSpan';
import StrikeSpan from './StrikeSpan';
-const CodeElement = lazy(() => import('../code/CodeElement'));
-
type MessageBlock =
| MessageParser.Emoji
| MessageParser.ChannelMention
diff --git a/packages/gazzodown/src/elements/InlineElements.tsx b/packages/gazzodown/src/elements/InlineElements.tsx
index e263510f843..39fcd7938cf 100644
--- a/packages/gazzodown/src/elements/InlineElements.tsx
+++ b/packages/gazzodown/src/elements/InlineElements.tsx
@@ -1,6 +1,7 @@
import type * as MessageParser from '@rocket.chat/message-parser';
import { lazy, ReactElement } from 'react';
+import CodeElement from '../code/CodeElement';
import ColorElement from '../colors/ColorElement';
import EmojiElement from '../emoji/EmojiElement';
import KatexErrorBoundary from '../katex/KatexErrorBoundary';
@@ -14,7 +15,6 @@ import PlainSpan from './PlainSpan';
import StrikeSpan from './StrikeSpan';
import Timestamp from './Timestamp';
-const CodeElement = lazy(() => import('../code/CodeElement'));
const KatexElement = lazy(() => import('../katex/KatexElement'));
type InlineElementsProps = {
diff --git a/packages/gazzodown/src/elements/ItalicSpan.tsx b/packages/gazzodown/src/elements/ItalicSpan.tsx
index 778b37cc2c4..4893d3b7e3b 100644
--- a/packages/gazzodown/src/elements/ItalicSpan.tsx
+++ b/packages/gazzodown/src/elements/ItalicSpan.tsx
@@ -1,7 +1,7 @@
import type * as MessageParser from '@rocket.chat/message-parser';
import type { ReactElement } from 'react';
-import { lazy } from 'react';
+import CodeElement from '../code/CodeElement';
import EmojiElement from '../emoji/EmojiElement';
import ChannelMentionElement from '../mentions/ChannelMentionElement';
import UserMentionElement from '../mentions/UserMentionElement';
@@ -10,8 +10,6 @@ import LinkSpan from './LinkSpan';
import PlainSpan from './PlainSpan';
import StrikeSpan from './StrikeSpan';
-const CodeElement = lazy(() => import('../code/CodeElement'));
-
type MessageBlock =
| MessageParser.Emoji
| MessageParser.ChannelMention
diff --git a/packages/gazzodown/src/elements/StrikeSpan.tsx b/packages/gazzodown/src/elements/StrikeSpan.tsx
index bbc4b899a40..34417f45d78 100644
--- a/packages/gazzodown/src/elements/StrikeSpan.tsx
+++ b/packages/gazzodown/src/elements/StrikeSpan.tsx
@@ -1,7 +1,7 @@
import type * as MessageParser from '@rocket.chat/message-parser';
import type { ReactElement } from 'react';
-import { lazy } from 'react';
+import CodeElement from '../code/CodeElement';
import EmojiElement from '../emoji/EmojiElement';
import ChannelMentionElement from '../mentions/ChannelMentionElement';
import UserMentionElement from '../mentions/UserMentionElement';
@@ -10,8 +10,6 @@ import ItalicSpan from './ItalicSpan';
import LinkSpan from './LinkSpan';
import PlainSpan from './PlainSpan';
-const CodeElement = lazy(() => import('../code/CodeElement'));
-
type MessageBlock =
| MessageParser.Timestamp
| MessageParser.Emoji
--
GitLab