From 570c9d16be2f2e0e95da6723aa5281f600424fba Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Mon, 4 Aug 2025 19:16:12 +0200
Subject: [PATCH] Performance regression fixes (#35664)

---
 .dockerignore                                 |  2 ++
 .../mastodon/features/emoji/emoji_html.tsx    | 19 ++++++++++++++++++-
 .../mastodon/features/emoji/hooks.ts          |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/.dockerignore b/.dockerignore
index 9d990ab9ce6..fe87f6e6006 100644
--- a/.dockerignore
+++ b/.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
diff --git a/app/javascript/mastodon/features/emoji/emoji_html.tsx b/app/javascript/mastodon/features/emoji/emoji_html.tsx
index fdda62a3e61..ed6f7a20465 100644
--- a/app/javascript/mastodon/features/emoji/emoji_html.tsx
+++ b/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 }}
+    />
+  );
+};
diff --git a/app/javascript/mastodon/features/emoji/hooks.ts b/app/javascript/mastodon/features/emoji/hooks.ts
index 47af37b3731..3f397f4ef03 100644
--- a/app/javascript/mastodon/features/emoji/hooks.ts
+++ b/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);