From 1b2d6f1516769099b1130bbf07ed4d08b37d7d15 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 10 Oct 2023 11:07:15 -0500
Subject: [PATCH] Wrap EmojiPicker with a Suspense boundary

---
 .../components/emoji-picker-dropdown.tsx      | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/features/emoji/components/emoji-picker-dropdown.tsx b/src/features/emoji/components/emoji-picker-dropdown.tsx
index 8917272b3..6cc3015cb 100644
--- a/src/features/emoji/components/emoji-picker-dropdown.tsx
+++ b/src/features/emoji/components/emoji-picker-dropdown.tsx
@@ -1,5 +1,5 @@
 import { Map as ImmutableMap } from 'immutable';
-import React, { useEffect, useState, useLayoutEffect } from 'react';
+import React, { useEffect, useState, useLayoutEffect, Suspense } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
@@ -215,21 +215,23 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
   return (
     visible ? (
       <RenderAfter update={update}>
-        <EmojiPicker
-          custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
-          title={title}
-          onEmojiSelect={handlePick}
-          recent={frequentlyUsedEmojis}
-          perLine={8}
-          skin={handleSkinTone}
-          emojiSize={22}
-          emojiButtonSize={34}
-          set='twitter'
-          theme={theme}
-          i18n={getI18n()}
-          skinTonePosition='search'
-          previewPosition='none'
-        />
+        <Suspense>
+          <EmojiPicker
+            custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
+            title={title}
+            onEmojiSelect={handlePick}
+            recent={frequentlyUsedEmojis}
+            perLine={8}
+            skin={handleSkinTone}
+            emojiSize={22}
+            emojiButtonSize={34}
+            set='twitter'
+            theme={theme}
+            i18n={getI18n()}
+            skinTonePosition='search'
+            previewPosition='none'
+          />
+        </Suspense>
       </RenderAfter>
     ) : null
   );