Performance: hide EmojiSelector until portaled

app/soapbox/components/status-reaction-wrapper.tsx

@@ -105,14 +105,16 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
         ref: setReferenceElement,
       })}
 
-      <Portal>
-        <EmojiSelector
-          placement='top-start'
-          referenceElement={referenceElement}
-          onReact={handleReact}
-          visible={visible}
-        />
-      </Portal>
+      {visible && (
+        <Portal>
+          <EmojiSelector
+            placement='top-start'
+            referenceElement={referenceElement}
+            onReact={handleReact}
+            visible={visible}
+          />
+        </Portal>
+      )}
     </div>
   );
 };

app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx

@@ -37,16 +37,18 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
         onClick: onToggleVisibility,
       })}
 
-      <Portal>
-        <EmojiSelector
-          visible={isOpen}
-          referenceElement={referenceElement}
-          onReact={handleSelect}
-          onClose={() => setIsOpen(false)}
-          offset={[-10, 12]}
-          all={false}
-        />
-      </Portal>
+      {isOpen && (
+        <Portal>
+          <EmojiSelector
+            visible={isOpen}
+            referenceElement={referenceElement}
+            onReact={handleSelect}
+            onClose={() => setIsOpen(false)}
+            offset={[-10, 12]}
+            all={false}
+          />
+        </Portal>
+      )}
     </React.Fragment>
   );
 }