[BUG] Inconsistent emojis

[VeckoTheGecko]

Describe the bug Emojis on the website are a mix of Twemoji emojis and default (platform specific) emojis.

It would be good to make all the emojis Twemoji for consistency.

I'm not entirely sure the source of the problem. It could be that emojis are only replaced with the Twemoji images on initial page load, and that for some reason doesn't capture all the emojis.

https://github.com/ClimateTown/knowledge-hub/blob/afede1e734049e80854ff452108b765f7b6a1dc4/src/routes/%2Blayout.svelte#L2-L18

[liamlaverty]

I took a quick look at this today, and I get strange results in Firefox and Edge. The first time I loaded the page, I had Twemoji on the left menu, but device emoji the Filter section. Then, after making no changes, I get Twemoji on all emoji on the visible page (see image 1).

Details that might help anyone else returning to this issue:

• There's a flash-of-unstyled-emoji when the page loads, initially emoji are shown, then Twemoji are loaded
• twemoji.parse(document.body) is called once onMount
• The cards further down the page are lazy-loaded, meaning they're never changed by onMount(() => twemoji.parse(document.body)); (consider updating to run the parse on lazyload?)
• When editing the site, moving an element around the page (for example <FilterForm being moved to the end of the resources page) causes the element to load device emoji on the first reload, then twemoji on any subsequent reloads (even if the subsequent reload was on another browser, or in a new private browsing window)

Image 1: above the fold twemoji are rendered:

Image 2: on lazy loaded content, device emoji are rendered: