Reactions: a custom-emoji reaction draws as its picture in the feed. emojiImg falls back to :code: text while a row's media isn't ready, and the feed freezes that choice per row (so a post's body never reflows) — a reaction usually lands after its row was frozen, so :kek_lord: stayed text for good. Reaction emoji sit in the action bar at a fixed height, so they skip the freeze (reactImg), on the like button, the chips and the who-reacted panel. post-edit-test checks it (fails on the old code).

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Vps2H27rhbG9ZqseGfMrc3

1 files changed, 7 insertions, 2 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 133b0b3..ae976a6 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -301,12 +301,17 @@ export function messagesFeature(ctx) {
   }
   const emojiImg = (code, url, cls = 'cemoji') =>
     feedPaint && !feedMedia(url) ? ':' + code + ':' : h('img', { class: cls, src: url, alt: ':' + code + ':', title: ':' + code + ':', loading: 'lazy' });
+  // A reaction's emoji always draws as its picture. The feed's freeze
+  // (emojiImg above) keeps a post's BODY from reflowing as pictures load, but
+  // a reaction sits in the action bar at a fixed size — and usually lands
+  // after its row was frozen, which left :kek_lord: as text for good.
+  const reactImg = (code, url) => h('img', { class: 'cemoji', src: url, alt: ':' + code + ':', title: ':' + code + ':', loading: 'lazy' });
   // A reaction's content as shown on its chip: the picture for a :code: we
   // know (its own tag taught it to us), the text otherwise.
   function reactNode(emoji) {
     const code = shortcodeOf(emoji);
     const url = code && emojiUrl(code);
-    return url ? emojiImg(code, url) : emoji;
+    return url ? reactImg(code, url) : emoji;
   }
   // the NIP-30 tag a :code: reaction travels with
   const reactEmojiTags = (emoji) => {
@@ -3891,7 +3896,7 @@ export function messagesFeature(ctx) {
   const reacts = new Map();  // note id -> Map([emoji, url] -> { emoji, url, who: Set<pubkey> })
   // Resolve from this reaction's own tag: packs can reuse the same shortcode
   // for different pictures, and an unrelated event must not change its face.
-  const postReactNode = ({ emoji, url }) => url ? emojiImg(shortcodeOf(emoji), url) : emoji;
+  const postReactNode = ({ emoji, url }) => url ? reactImg(shortcodeOf(emoji), url) : emoji;
   const boosts = new Map();  // note id -> Set<pubkey>
   const noteCountsReady = new Set(); // a relay batch is complete for this note
   const seenNoteEv = new Set(); // event ids already counted