fix: Layout shift on room body when loading uikit messages (#31894)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

.changeset/long-phones-reflect.md

+---
+"@rocket.chat/meteor": patch
+---
+
+fixed a small issue that was causing the room layout to shift when loading apps messages

apps/meteor/client/components/message/uikit/UiKitMessageBlock.tsx

 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>

packages/fuselage-ui-kit/src/elements/MarkdownTextElement.tsx

+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;

packages/gazzodown/src/elements/BoldSpan.tsx

 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

packages/gazzodown/src/elements/InlineElements.tsx

 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 = {

packages/gazzodown/src/elements/ItalicSpan.tsx

 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

packages/gazzodown/src/elements/StrikeSpan.tsx

 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