regression: Emoji Picker recent list and load more not working (#35673)

apps/meteor/app/emoji-emojione/client/hooks/useEmojiOne.ts

@@ -1,7 +1,6 @@
 import { useUserPreference } from '@rocket.chat/ui-contexts';
-import { useEffect } from 'react';
+import { useEffect, useLayoutEffect } from 'react';
 
-import { queueMicrotask } from '../../../../client/lib/utils/queueMicrotask';
 import { emoji } from '../../../emoji/client';
 import { getEmojiConfig } from '../../lib/getEmojiConfig';
 import { isSetNotNull } from '../../lib/isSetNotNull';
@@ -11,32 +10,30 @@ const config = getEmojiConfig();
 export const useEmojiOne = () => {
 	const convertAsciiToEmoji = useUserPreference<boolean>('convertAsciiEmoji', true);
 
-	useEffect(() => {
-		queueMicrotask(() => {
-			emoji.packages.emojione = config.emojione as any;
-			if (emoji.packages.emojione) {
-				emoji.packages.emojione.sprites = config.sprites;
-				emoji.packages.emojione.emojisByCategory = config.emojisByCategory;
-				emoji.packages.emojione.emojiCategories = config.emojiCategories as any;
-				emoji.packages.emojione.toneList = config.toneList;
-
-				emoji.packages.emojione.render = config.render;
-				emoji.packages.emojione.renderPicker = config.renderPicker;
-
-				// RocketChat.emoji.list is the collection of emojis from all emoji packages
-				for (const [key, currentEmoji] of Object.entries(config.emojione.emojioneList)) {
-					currentEmoji.emojiPackage = 'emojione';
-					emoji.list[key] = currentEmoji;
-
-					if (currentEmoji.shortnames) {
-						currentEmoji.shortnames.forEach((shortname: string) => {
-							emoji.list[shortname] = currentEmoji;
-						});
-					}
+	useLayoutEffect(() => {
+		emoji.packages.emojione = config.emojione as any;
+		if (emoji.packages.emojione) {
+			emoji.packages.emojione.sprites = config.sprites;
+			emoji.packages.emojione.emojisByCategory = config.emojisByCategory;
+			emoji.packages.emojione.emojiCategories = config.emojiCategories as any;
+			emoji.packages.emojione.toneList = config.toneList;
+
+			emoji.packages.emojione.render = config.render;
+			emoji.packages.emojione.renderPicker = config.renderPicker;
+
+			// RocketChat.emoji.list is the collection of emojis from all emoji packages
+			for (const [key, currentEmoji] of Object.entries(config.emojione.emojioneList)) {
+				currentEmoji.emojiPackage = 'emojione';
+				emoji.list[key] = currentEmoji;
+
+				if (currentEmoji.shortnames) {
+					currentEmoji.shortnames.forEach((shortname: string) => {
+						emoji.list[shortname] = currentEmoji;
+					});
 				}
 			}
-			emoji.dispatchUpdate();
-		});
+		}
+		emoji.dispatchUpdate();
 	}, []);
 
 	useEffect(() => {

apps/meteor/app/emoji/client/helpers.ts

@@ -65,14 +65,15 @@ export const createEmojiList = (
 ): (RowItem | LoadMoreItem)[] => {
 	const items: RowItem = [];
 	const emojiPackages = Object.values(emoji.packages);
+	let count = 0;
+	let limited = false;
 
 	emojiPackages.forEach((emojiPackage) => {
 		if (!emojiPackage.emojisByCategory?.[category]) {
 			return;
 		}
-
-		const total = emojiPackage.emojisByCategory[category].length;
-
+		const _total = emojiPackage.emojisByCategory[category].length;
+		const total = category === CUSTOM_CATEGORY ? customItemsLimit - count : _total;
 		for (let i = 0; i < total; i++) {
 			const current = emojiPackage.emojisByCategory[category][i];
 
@@ -90,6 +91,11 @@ export const createEmojiList = (
 				continue;
 			}
 			items.push({ emoji: current, image, category });
+			count++;
+		}
+
+		if (_total > total) {
+			limited = true;
 		}
 	});
 
@@ -101,7 +107,11 @@ export const createEmojiList = (
 		rowList[i] = row;
 	}
 
-	if (category === CUSTOM_CATEGORY && customItemsLimit < items.length) {
+	if (rowList.length === 0) {
+		rowList.push([]);
+	}
+
+	if (limited) {
 		rowList.push({ loadMore: true });
 	}
 

apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx

@@ -42,12 +42,9 @@ const EmojiCategoryRow = ({ item, handleLoadMore, handleSelectEmoji }: EmojiCate
 		return <EmojiPickerLoadMore onClick={handleLoadMore}>{t('Load_more')}</EmojiPickerLoadMore>;
 	}
 
-	if (item.length === 0) {
-		return <EmojiPickerNotFound>{t('No_emojis_found')}</EmojiPickerNotFound>;
-	}
-
 	return (
 		<EmojiPickerCategoryWrapper className={[categoryRowStyle /* `emoji-category-${categoryKey}` */].filter(Boolean)}>
+			{item.length === 0 && <EmojiPickerNotFound>{t('No_emojis_found')}</EmojiPickerNotFound>}
 			{item.map(({ emoji, image, category }) => (
 				<EmojiElement key={emoji + category} emoji={emoji} image={image} onClick={handleSelectEmoji} />
 			))}

packages/ui-client/src/components/EmojiPicker/EmojiPickerNotFound.tsx

@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { AllHTMLAttributes } from 'react';
 
 const EmojiPickerNotFound = (props: Omit<AllHTMLAttributes<HTMLDivElement>, 'is' | 'style'>) => (
-	<Box {...props} display='flex' flexDirection='column' alignItems='center' fontScale='c1' mb={8} />
+	<Box {...props} display='flex' flexDirection='column' alignItems='center' fontScale='c1' mb={8} w='full' />
 );
 
 export default EmojiPickerNotFound;