Fix emoji picker 404s for URL-encoded filenames

slack status without the slack status.zzstoatzz.io/

quickslice

- Use placeholder images in emoji picker initially
- Load actual images after a frame to prevent race conditions
- Properly handle URL-encoded filenames like se%C3%B1or-bufo.png

zzstoatzz.io 5 months ago 82046572 2c2741a4

+10 -1

1 changed file

expand all

unified split

templates

status.html

+10 -1

templates/status.html

··· 2246 2246 button.dataset.name = emoji.name; 2247 2247 2248 2248 const img = document.createElement('img'); 2249 - img.src = `/emojis/${emoji.filename}`; 2249 + // Use placeholder initially to avoid 404s 2250 + img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; 2251 + img.dataset.emojiName = emoji.name; 2252 + img.dataset.emojiFilename = emoji.filename; 2250 2253 img.alt = emoji.name; 2251 2254 img.title = emoji.name; 2252 2255 button.appendChild(img); 2256 + 2257 + // Load the actual image after a brief delay to let resolver initialize 2258 + requestAnimationFrame(() => { 2259 + img.src = `/emojis/${emoji.filename}`; 2260 + }); 2261 + 2253 2262 return button; 2254 2263 }; 2255 2264