fix: Reactions tooltip loader (#31703)

.changeset/rich-dingos-mix.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Added reactions tooltip loader

apps/meteor/client/components/message/content/reactions/ReactionTooltip.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
@@ -42,7 +43,7 @@ const ReactionTooltip = ({ emojiName, usernames, mine, messageId, showRealName,
 
 	const getMessage = useGetMessageByID();
 
-	const { data: users } = useQuery(
+	const { data: users, isLoading } = useQuery(
 		['chat.getMessage', 'reactions', messageId, usernames],
 		async () => {
 			// This happens if the only reaction is from the current user
@@ -73,6 +74,17 @@ const ReactionTooltip = ({ emojiName, usernames, mine, messageId, showRealName,
 		{ staleTime: 1000 * 60 * 5 },
 	);
 
+	if (isLoading) {
+		return (
+			<>
+				<Skeleton width='x200' variant='text' backgroundColor='black' />
+				<Skeleton width='x200' variant='text' backgroundColor='black' />
+				{usernames.length > 5 && <Skeleton width='x200' variant='text' backgroundColor='black' />}
+				{usernames.length > 8 && <Skeleton width='x200' variant='text' backgroundColor='black' />}
+			</>
+		);
+	}
+
 	return (
 		<MarkdownText
 			content={t(key, {