Emoji loading performance (#38784)

app/javascript/mastodon/features/account_edit/index.tsx

@@ -17,6 +17,7 @@ import { ToggleField } from '@/mastodon/components/form_fields';
 import { useElementHandledLink } from '@/mastodon/components/status/handled_link';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
+import { useCustomEmojis } from '@/mastodon/hooks/useCustomEmojis';
 import { autoPlayGif } from '@/mastodon/initial_state';
 import {
   fetchProfile,
@@ -175,7 +176,7 @@ export const AccountEdit: FC = () => {
   }, [dispatch, profile?.bot]);
 
   // Normally we would use the account emoji, but we want all custom emojis to be available to render after editing.
-  const emojis = useAppSelector((state) => state.custom_emojis);
+  const emojis = useCustomEmojis();
   const htmlHandlers = useElementHandledLink({
     hashtagAccountId: profile?.id,
   });

app/javascript/mastodon/features/account_edit/modals/fields_modals.tsx

@@ -1,4 +1,10 @@
-import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 import type { FC, FocusEventHandler } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -9,6 +15,7 @@ import { closeModal } from '@/mastodon/actions/modal';
 import { Button } from '@/mastodon/components/button';
 import type { FieldStatus } from '@/mastodon/components/form_fields';
 import { EmojiTextInputField } from '@/mastodon/components/form_fields';
+import { useCustomEmojis } from '@/mastodon/hooks/useCustomEmojis';
 import {
   removeField,
   selectFieldById,
@@ -104,11 +111,6 @@ const selectFieldLimits = createAppSelector(
 
 const RECOMMENDED_LIMIT = 40;
 
-const selectEmojiCodes = createAppSelector(
-  [(state) => state.custom_emojis],
-  (emojis) => emojis.map((emoji) => emoji.get('shortcode')).toArray(),
-);
-
 interface ConfirmationMessage {
   message: string;
   confirm: string;
@@ -143,7 +145,11 @@ export const EditFieldModal = forwardRef<
     value?: FieldStatus;
   }>({});
 
-  const customEmojiCodes = useAppSelector(selectEmojiCodes);
+  const customEmojis = useCustomEmojis();
+  const customEmojiCodes = useMemo(
+    () => Object.keys(customEmojis ?? {}),
+    [customEmojis],
+  );
   const checkField = useCallback(
     (value: string): FieldStatus | null => {
       if (!value.trim()) {

app/javascript/mastodon/features/account_edit/modals/fields_reorder_modal.tsx

@@ -35,6 +35,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { CustomEmojiProvider } from '@/mastodon/components/emoji/context';
 import { normalizeKey } from '@/mastodon/components/hotkeys/utils';
 import { Icon } from '@/mastodon/components/icon';
+import { useCustomEmojis } from '@/mastodon/hooks/useCustomEmojis';
 import type { FieldData } from '@/mastodon/reducers/slices/profile_edit';
 import {
   patchProfile,
@@ -217,7 +218,7 @@ export const ReorderFieldsModal: FC<DialogModalProps> = ({ onClose }) => {
     void dispatch(patchProfile({ fields_attributes: newFields })).then(onClose);
   }, [dispatch, fieldKeys, fields, onClose]);
 
-  const emojis = useAppSelector((state) => state.custom_emojis);
+  const emojis = useCustomEmojis();
 
   return (
     // Add a wrapper here in the capture phase, so that it can be intercepted before the window listener in ModalRoot.