regression: Emojis taking too long to render on EmojiPicker (Rocket…

…Chat#29603) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
sampaiodiego · Jun 21, 2023 · 5132e6d · 5132e6d
1 parent e65933b
commit 5132e6d
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 29 deletions.
diff --git a/apps/meteor/app/emoji/client/helpers.ts b/apps/meteor/app/emoji/client/helpers.ts
@@ -57,7 +57,7 @@ export const createEmojiList = (
 			if (!image) {
 				continue;
 			}
-			emojiList.push({ emoji: current, image, emojiHandle: emojiToRender });
+			emojiList.push({ emoji: current, image });
 		}
 	});
 

diff --git a/apps/meteor/app/emoji/client/types.ts b/apps/meteor/app/emoji/client/types.ts
@@ -3,7 +3,6 @@ import type { TranslationKey } from '@rocket.chat/ui-contexts';
 export type EmojiItem = {
 	emoji: string;
 	image: string;
-	emojiHandle: string;
 };
 
 export type EmojiCategory = {

diff --git a/apps/meteor/client/components/message/toolbox/Toolbox.tsx b/apps/meteor/client/components/message/toolbox/Toolbox.tsx
@@ -92,18 +92,8 @@ const Toolbox = ({ message, messageContext, room, subscription }: ToolboxProps):
 	return (
 		<MessageToolbox>
 			{recentList.length > 0 &&
-				recentList.slice(0, 3).map(({ emoji, image, emojiHandle }) => {
-					return (
-						<EmojiElement
-							small
-							key={emoji}
-							title={emoji}
-							emoji={emoji}
-							image={image}
-							emojiHandle={emojiHandle}
-							onClick={() => handleSetReaction(emoji)}
-						/>
-					);
+				recentList.slice(0, 3).map(({ emoji, image }) => {
+					return <EmojiElement small key={emoji} title={emoji} emoji={emoji} image={image} onClick={() => handleSetReaction(emoji)} />;
 				})}
 			{actionsQueryResult.data?.message.map((action) => (
 				<MessageToolboxItem

diff --git a/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx b/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx
@@ -57,20 +57,14 @@ const EmojiCategoryRow = ({
 					<>
 						{categoryKey === CUSTOM_CATEGORY &&
 							emojis.list.map(
-								({ emoji, image, emojiHandle }, index = 1) =>
+								({ emoji, image }, index = 1) =>
 									index < customItemsLimit && (
-										<EmojiElement
-											key={emoji + categoryKey}
-											emoji={emoji}
-											image={image}
-											emojiHandle={emojiHandle}
-											onClick={handleSelectEmoji}
-										/>
+										<EmojiElement key={emoji + categoryKey} emoji={emoji} image={image} onClick={handleSelectEmoji} />
 									),
 							)}
 						{!(categoryKey === CUSTOM_CATEGORY) &&
-							emojis.list.map(({ emoji, image, emojiHandle }) => (
-								<EmojiElement key={emoji + categoryKey} emoji={emoji} image={image} emojiHandle={emojiHandle} onClick={handleSelectEmoji} />
+							emojis.list.map(({ emoji, image }) => (
+								<EmojiElement key={emoji + categoryKey} emoji={emoji} image={image} onClick={handleSelectEmoji} />
 							))}
 					</>
 				</EmojiPickerCategoryWrapper>

diff --git a/apps/meteor/client/views/composer/EmojiPicker/EmojiElement.tsx b/apps/meteor/client/views/composer/EmojiPicker/EmojiElement.tsx
@@ -4,17 +4,20 @@ import type { MouseEvent, AllHTMLAttributes } from 'react';
 import React, { memo } from 'react';
 
 import type { EmojiItem } from '../../../../app/emoji/client';
-import Emoji from '../../../components/Emoji';
 import { usePreviewEmoji } from '../../../contexts/EmojiPickerContext';
 
 type EmojiElementProps = EmojiItem & { small?: boolean; onClick: (e: MouseEvent<HTMLElement>) => void } & Omit<
 		AllHTMLAttributes<HTMLButtonElement>,
 		'is'
 	>;
 
-const EmojiElement = ({ emoji, image, emojiHandle, onClick, small = false, ...props }: EmojiElementProps) => {
+const EmojiElement = ({ emoji, image, onClick, small = false, ...props }: EmojiElementProps) => {
 	const { handlePreview, handleRemovePreview } = usePreviewEmoji();
 
+	if (!image) {
+		return null;
+	}
+
 	const emojiSmallClass = css`
 		> .emoji,
 		.emojione {
@@ -23,7 +26,7 @@ const EmojiElement = ({ emoji, image, emojiHandle, onClick, small = false, ...pr
 		}
 	`;
 
-	const emojiElement = <Emoji emojiHandle={emojiHandle} />;
+	const emojiElement = <div dangerouslySetInnerHTML={{ __html: image }} />;
 
 	return (
 		<IconButton

diff --git a/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx b/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx
@@ -37,8 +37,8 @@ const SearchingResult = ({ searchResults, handleSelectEmoji }: SearchingResultPr
 				List: SearchingResultWrapper,
 			}}
 			itemContent={(index) => {
-				const { emoji, image, emojiHandle } = searchResults[index] || {};
-				return <EmojiElement emoji={emoji} image={image} emojiHandle={emojiHandle} onClick={handleSelectEmoji} />;
+				const { emoji, image } = searchResults[index] || {};
+				return <EmojiElement emoji={emoji} image={image} onClick={handleSelectEmoji} />;
 			}}
 		/>
 	);