From b17fb5dea8da2210d3ad331cbda0619b0e5c1aa7 Mon Sep 17 00:00:00 2001
From: WolverinDEV <git@did.science>
Date: Wed, 6 Jan 2021 17:26:34 +0100
Subject: [PATCH] Only rendering the emoji picker when it's needed If not done
 so the whole channel select render will take an eternity

---
 shared/js/ui/react-elements/ChatBox.tsx | 31 ++++++++++++++-----------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/shared/js/ui/react-elements/ChatBox.tsx b/shared/js/ui/react-elements/ChatBox.tsx
index f2c5803c..074e1646 100644
--- a/shared/js/ui/react-elements/ChatBox.tsx
+++ b/shared/js/ui/react-elements/ChatBox.tsx
@@ -59,21 +59,24 @@ const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => {
                 <img alt={""} src={"img/smiley-smile.svg"} />
             </div>
             <div className={cssStyle.picker} style={{ display: shown ? undefined : "none" }}>
-                <Picker
-                    set={"twitter"}
-                    theme={"light"}
-                    showPreview={true}
-                    title={""}
-                    showSkinTones={true}
-                    useButton={false}
-                    native={false}
+                {!shown ? undefined :
+                    <Picker
+                        key={"picker"}
+                        set={"twitter"}
+                        theme={"light"}
+                        showPreview={true}
+                        title={""}
+                        showSkinTones={true}
+                        useButton={false}
+                        native={false}
 
-                    onSelect={(emoji: any) => {
-                        if(enabled) {
-                            props.events.fire("action_insert_text", { text: emoji.native, focus: true });
-                        }
-                    }}
-                />
+                        onSelect={(emoji: any) => {
+                            if(enabled) {
+                                props.events.fire("action_insert_text", { text: emoji.native, focus: true });
+                            }
+                        }}
+                    />
+                }
             </div>
         </div>
     );