fix: Quick Reactions missing after refresh

.changeset/tasty-pianos-bathe.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixes an issue where quick reactions (Feature Preview) would be absent on first access and after page refreshes

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

@@ -21,15 +21,17 @@ export const createEmojiListByCategorySubscription = (
 	actualTone: number,
 	recentEmojis: string[],
 	setRecentEmojis: (emojis: string[]) => void,
+	setQuickReactions: () => void,
 ): [subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => ReturnType<typeof createPickerEmojis>] => {
 	let result: ReturnType<typeof createPickerEmojis> = [[], []];
 	updateRecent(recentEmojis);
 
 	const sub = (cb: () => void) => {
 		result = createPickerEmojis(customItemsLimit, actualTone, recentEmojis, setRecentEmojis);
-
+		setQuickReactions();
 		return emojiEmitter.on('updated', () => {
 			result = createPickerEmojis(customItemsLimit, actualTone, recentEmojis, setRecentEmojis);
+			setQuickReactions();
 			cb();
 		});
 	};

apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.tsx

@@ -1,4 +1,4 @@
-import { useDebouncedState, useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import { useDebouncedState, useEffectEvent, useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import type { ReactNode, ReactElement, ContextType } from 'react';
 import { useState, useCallback, useMemo, useSyncExternalStore } from 'react';
 
@@ -23,13 +23,14 @@ const EmojiPickerProvider = ({ children }: { children: ReactNode }): ReactElemen
 
 	const [customItemsLimit, setCustomItemsLimit] = useState(DEFAULT_ITEMS_LIMIT);
 
-	const [quickReactions, setQuickReactions] = useState<{ emoji: string; image: string }[]>(() =>
+	const [quickReactions, _setQuickReactions] = useState<{ emoji: string; image: string }[]>(() =>
 		getFrequentEmoji(frequentEmojis.map(([emoji]) => emoji)),
 	);
 
+	const setQuickReactions = useEffectEvent(() => _setQuickReactions(getFrequentEmoji(frequentEmojis.map(([emoji]) => emoji))));
 	const [sub, getSnapshot] = useMemo(() => {
-		return createEmojiListByCategorySubscription(customItemsLimit, actualTone, recentEmojis, setRecentEmojis);
-	}, [customItemsLimit, actualTone, recentEmojis, setRecentEmojis]);
+		return createEmojiListByCategorySubscription(customItemsLimit, actualTone, recentEmojis, setRecentEmojis, setQuickReactions);
+	}, [customItemsLimit, actualTone, recentEmojis, setRecentEmojis, setQuickReactions]);
 
 	const [emojiListByCategory, categoriesIndexes] = useSyncExternalStore(sub, getSnapshot);
 
@@ -46,7 +47,7 @@ const EmojiPickerProvider = ({ children }: { children: ReactNode }): ReactElemen
 				.sort(([, frequentA], [, frequentB]) => frequentB - frequentA);
 
 			setFrequentEmojis(sortedFrequent);
-			setQuickReactions(getFrequentEmoji(sortedFrequent.map(([emoji]) => emoji)));
+			_setQuickReactions(getFrequentEmoji(sortedFrequent.map(([emoji]) => emoji)));
 		},
 		[frequentEmojis, setFrequentEmojis],
 	);