diff --git a/.changeset/long-phones-reflect.md b/.changeset/long-phones-reflect.md new file mode 100644 index 0000000000000000000000000000000000000000..4c822bd2fecb845eec25a98b306a9ca89ac6bad9 --- /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 3b8570e0de22d1875b945c16e60112cc51bdc0e2..dbdd8f4e731bdfda6467e419801f6d20ead85272 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 3eb04576851a6d7de5dd18d33393358824d7d803..21f34ada9c9361427c1883b35ef54c10e966252a 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 8ce85f4dccc052473a564e63e634f7678da472c4..c00cd0c1d95ac02160f8161e632b5612cc99cee4 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 e263510f843a53152a5aec052db0b5709e80c685..39fcd7938cffd22312af3914d54d625575f406e2 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 778b37cc2c47664b8c727f4cf66ab8111abe414f..4893d3b7e3b68075440a3b352dde8f309dba7cd1 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 bbc4b899a40f952fad15273f915ec552eae88205..34417f45d7875040702ad7be81bee05ef86213c7 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