Performance regression fixes (#35664)

.dockerignore

@@ -5,6 +5,7 @@
 .gitattributes
 .gitignore
 .github
+.vscode
 public/system
 public/assets
 public/packs
@@ -20,6 +21,7 @@ postgres14
 redis
 elasticsearch
 chart
+storybook-static
 .yarn/
 !.yarn/patches
 !.yarn/plugins

app/javascript/mastodon/features/emoji/emoji_html.tsx

@@ -1,5 +1,7 @@
 import type { ComponentPropsWithoutRef, ElementType } from 'react';
 
+import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
+
 import { useEmojify } from './hooks';
 import type { CustomEmojiMapArg } from './types';
 
@@ -12,7 +14,7 @@ type EmojiHTMLProps<Element extends ElementType = 'div'> = Omit<
   as?: Element;
 };
 
-export const EmojiHTML = <Element extends ElementType>({
+export const ModernEmojiHTML = <Element extends ElementType>({
   extraEmojis,
   htmlString,
   as: asElement, // Rename for syntax highlighting
@@ -29,3 +31,18 @@ export const EmojiHTML = <Element extends ElementType>({
     <Wrapper {...props} dangerouslySetInnerHTML={{ __html: emojifiedHtml }} />
   );
 };
+
+export const EmojiHTML = <Element extends ElementType>(
+  props: EmojiHTMLProps<Element>,
+) => {
+  if (isModernEmojiEnabled()) {
+    return <ModernEmojiHTML {...props} />;
+  }
+  const Wrapper = props.as ?? 'div';
+  return (
+    <Wrapper
+      {...props}
+      dangerouslySetInnerHTML={{ __html: props.htmlString }}
+    />
+  );
+};

app/javascript/mastodon/features/emoji/hooks.ts

@@ -8,7 +8,6 @@ import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
 
 import { toSupportedLocale } from './locale';
 import { determineEmojiMode } from './mode';
-import { emojifyElement } from './render';
 import type {
   CustomEmojiMapArg,
   EmojiAppState,
@@ -39,6 +38,7 @@ export function useEmojify(text: string, extraEmojis?: CustomEmojiMapArg) {
     async (input: string) => {
       const wrapper = document.createElement('div');
       wrapper.innerHTML = input;
+      const { emojifyElement } = await import('./render');
       const result = await emojifyElement(wrapper, appState, extra);
       if (result) {
         setEmojifiedText(result.innerHTML);