From 94bbbd10219f45d7c95be93cef930d86dbf25f78 Mon Sep 17 00:00:00 2001
From: Hampus <hampus@fluxer.app>
Date: Mon, 24 Aug 2026 12:41:58 +0200
Subject: [PATCH] fix(app): only track hover on reactions that have an animated
 emoji (#1899)

---
 .../shared/MessageReactionsContent.tsx        |  7 +++++--
 .../ui/action_menu/MessageContextMenu.tsx     | 19 ++++++-------------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/fluxer_app/src/features/app/components/shared/MessageReactionsContent.tsx b/fluxer_app/src/features/app/components/shared/MessageReactionsContent.tsx
index 32801e62a..259b4fc8f 100644
--- a/fluxer_app/src/features/app/components/shared/MessageReactionsContent.tsx
+++ b/fluxer_app/src/features/app/components/shared/MessageReactionsContent.tsx
@@ -4,6 +4,7 @@ import {LongPressable} from '@app/features/app/components/LongPressable';
 import styles from '@app/features/app/components/shared/MessageReactionsContent.module.css';
 import {useHover} from '@app/features/app/hooks/useHover';
 import reactionStyles from '@app/features/channel/components/MessageReactions.module.css';
+import {ReactionImage} from '@app/features/messaging/components/ReactionImage';
 import {
 	emojiEquals,
 	getEmojiName,
@@ -49,6 +50,7 @@ const ReactionFilterButton = observer(
 	({reaction, isSelected, onSelect, onContextMenu, showTooltip}: ReactionFilterButtonProps) => {
 		const {i18n} = useLingui();
 		const [hoverRef, isHovering] = useHover();
+		const emojiHasAnimatedVariant = reaction.emoji.animated === true;
 		const emojiName = getEmojiName(reaction.emoji);
 		const emojiUrl = useEmojiURL({emoji: reaction.emoji, isHovering});
 		const reactionCountText = plural(
@@ -67,7 +69,7 @@ const ReactionFilterButton = observer(
 					aria-pressed={isSelected}
 					onClick={onSelect}
 					onContextMenu={onContextMenu}
-					ref={hoverRef}
+					ref={emojiHasAnimatedVariant ? hoverRef : undefined}
 					className={clsx(
 						reactionStyles.reactionButton,
 						styles.filterButton,
@@ -80,10 +82,11 @@ const ReactionFilterButton = observer(
 						data-flx="app.message-reactions-content.reaction-filter-button.div"
 					>
 						{emojiUrl ? (
-							<img
+							<ReactionImage
 								className={clsx('emoji', reactionStyles.emoji)}
 								src={emojiUrl}
 								alt={emojiName}
+								aria-hidden={true}
 								draggable={false}
 								data-flx="app.message-reactions-content.reaction-filter-button.emoji"
 							/>
diff --git a/fluxer_app/src/features/ui/action_menu/MessageContextMenu.tsx b/fluxer_app/src/features/ui/action_menu/MessageContextMenu.tsx
index dd36f0393..94a7cbe9e 100644
--- a/fluxer_app/src/features/ui/action_menu/MessageContextMenu.tsx
+++ b/fluxer_app/src/features/ui/action_menu/MessageContextMenu.tsx
@@ -4,14 +4,14 @@ import Accessibility from '@app/features/accessibility/state/Accessibility';
 import {messageActionMenuItemIds, useMessageActionMenuData} from '@app/features/channel/components/MessageActionMenu';
 import {getEffectiveContent, triggerAddReaction} from '@app/features/channel/components/MessageActionUtils';
 import {
-	getQuickReactionEmojiSrc,
 	REACT_WITH_EMOJI_DESCRIPTOR,
 	renderQuickReactionEmoji,
+	useReactionMenuImagePreload,
+	useReactionSubmenuEmojiSrc,
 } from '@app/features/channel/components/QuickReactionsRow';
 import type {Channel} from '@app/features/channel/models/Channel';
 import EmojiPicker from '@app/features/emoji/state/EmojiPicker';
 import type {FlatEmoji} from '@app/features/emoji/types/EmojiTypes';
-import {useExpressionImagesPreload} from '@app/features/expressions/utils/ExpressionImageCache';
 import {
 	COPY_LINK_DESCRIPTOR,
 	COPY_TEXT_DESCRIPTOR,
@@ -126,7 +126,7 @@ interface RemoveReactionsSubmenuProps {
 const RemoveReactionsSubmenuItem = observer(
 	({reaction, channelId, messageId}: {reaction: MessageReaction; channelId: string; messageId: string}) => {
 		const {i18n} = useLingui();
-		const emojiUrl = useEmojiURL({emoji: reaction.emoji, size: 32});
+		const emojiUrl = useEmojiURL({emoji: reaction.emoji});
 		const label = getEmojiNameWithColons(reaction.emoji);
 		if (reaction.count <= 0) {
 			return null;
@@ -188,10 +188,10 @@ const RemoveReactionsSubmenu = observer(({reactions, channelId, messageId}: Remo
 
 RemoveReactionsSubmenu.displayName = 'RemoveReactionsSubmenu';
 
-const AddReactionSubmenuItem = observer(
+export const AddReactionSubmenuItem = observer(
 	({emoji, onSelect}: {emoji: FlatEmoji; onSelect: (emoji: FlatEmoji) => void}) => {
 		const reactionEmoji = useMemo(() => toReactionEmoji(emoji), [emoji]);
-		const emojiUrl = useEmojiURL({emoji: reactionEmoji, size: 32});
+		const emojiUrl = useReactionSubmenuEmojiSrc(emoji);
 		const label = getEmojiNameWithColons(reactionEmoji);
 		const renderEmojiPreview = () => {
 			if (emojiUrl) {
@@ -427,14 +427,7 @@ export const MessageContextMenu: React.FC<MessageContextMenuProps> = observer(
 				quickReactionCount: 4,
 				submenuReactionCount: 16,
 			});
-		const preloadedReactionImageUrls = useMemo(
-			() =>
-				Array.from(
-					new Set([...quickReactionEmojis, ...submenuReactionEmojis].map((emoji) => getQuickReactionEmojiSrc(emoji))),
-				),
-			[quickReactionEmojis, submenuReactionEmojis],
-		);
-		useExpressionImagesPreload(preloadedReactionImageUrls);
+		useReactionMenuImagePreload(quickReactionEmojis, submenuReactionEmojis);
 		const handleQuickReact = useCallback(
 			(emoji: FlatEmoji) => {
 				EmojiPicker.trackEmoji(emoji);