From 603c9ec892485a352a002a605e2e6ddc6450312b Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 27 May 2026 16:01:17 -0400
Subject: [PATCH] fix: import EmojiBoard directly in ProfileStatus to fix emoji
 selection

React.lazy + Suspense interacted badly with the nested FocusTraps (the
settings Modal500 outer trap and EmojiBoard's inner trap). During the
suspend/resolve cycle targetFromEvent returned undefined, causing
handleGroupItemClick to bail before calling onEmojiSelect.

Switched to a direct import matching MessageEditor and PowersEditor
which both use EmojiBoard inside settings panels without lazy loading.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/features/settings/account/Profile.tsx | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx
index bc61b088e..c992539d0 100644
--- a/src/app/features/settings/account/Profile.tsx
+++ b/src/app/features/settings/account/Profile.tsx
@@ -1,7 +1,6 @@
 import React, {
   ChangeEventHandler,
   FormEventHandler,
-  Suspense,
   useCallback,
   useEffect,
   useMemo,
@@ -47,10 +46,7 @@ import { createUploadAtom, UploadSuccess } from '../../../state/upload';
 import { CompactUploadCardRenderer } from '../../../components/upload-card';
 import { useCapabilities } from '../../../hooks/useCapabilities';
 import { useUserPresence } from '../../../hooks/useUserPresence';
-
-const EmojiBoard = React.lazy(() =>
-  import('../../../components/emoji-board').then((m) => ({ default: m.EmojiBoard })),
-);
+import { EmojiBoard } from '../../../components/emoji-board';
 
 type ProfileProps = {
   profile: UserProfile;
@@ -457,14 +453,12 @@ function ProfileStatus() {
             position="Top"
             align="End"
             content={
-              <Suspense fallback={<Spinner size="100" />}>
-                <EmojiBoard
-                  imagePackRooms={[]}
-                  returnFocusOnDeactivate={false}
-                  onEmojiSelect={handleEmojiSelect}
-                  requestClose={() => setEmojiAnchor(undefined)}
-                />
-              </Suspense>
+              <EmojiBoard
+                imagePackRooms={[]}
+                returnFocusOnDeactivate={false}
+                onEmojiSelect={handleEmojiSelect}
+                requestClose={() => setEmojiAnchor(undefined)}
+              />
             }
           >
             <IconButton