retrieve custom emoji list via API instead of before page load (#7047)

app/javascript/mastodon/actions/custom_emojis.js

+import api from '../api';
+
+export const CUSTOM_EMOJIS_FETCH_REQUEST = 'CUSTOM_EMOJIS_FETCH_REQUEST';
+export const CUSTOM_EMOJIS_FETCH_SUCCESS = 'CUSTOM_EMOJIS_FETCH_SUCCESS';
+export const CUSTOM_EMOJIS_FETCH_FAIL = 'CUSTOM_EMOJIS_FETCH_FAIL';
+
+export function fetchCustomEmojis() {
+  return (dispatch, getState) => {
+    dispatch(fetchCustomEmojisRequest());
+
+    api(getState).get('/api/v1/custom_emojis').then(response => {
+      dispatch(fetchCustomEmojisSuccess(response.data));
+    }).catch(error => {
+      dispatch(fetchCustomEmojisFail(error));
+    });
+  };
+};
+
+export function fetchCustomEmojisRequest() {
+  return {
+    type: CUSTOM_EMOJIS_FETCH_REQUEST,
+  };
+};
+
+export function fetchCustomEmojisSuccess(custom_emojis) {
+  return {
+    type: CUSTOM_EMOJIS_FETCH_SUCCESS,
+    custom_emojis,
+  };
+};
+
+export function fetchCustomEmojisFail(error) {
+  return {
+    type: CUSTOM_EMOJIS_FETCH_FAIL,
+    error,
+  };
+};

app/javascript/mastodon/containers/mastodon.js

@@ -6,6 +6,7 @@ import { showOnboardingOnce } from '../actions/onboarding';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { ScrollContext } from 'react-router-scroll-4';
 import UI from '../features/ui';
+import { fetchCustomEmojis } from '../actions/custom_emojis';
 import { hydrateStore } from '../actions/store';
 import { connectUserStream } from '../actions/streaming';
 import { IntlProvider, addLocaleData } from 'react-intl';
@@ -19,6 +20,9 @@ export const store = configureStore();
 const hydrateAction = hydrateStore(initialState);
 store.dispatch(hydrateAction);
 
+// load custom emojis
+store.dispatch(fetchCustomEmojis());
+
 export default class Mastodon extends React.PureComponent {
 
   static propTypes = {

app/javascript/mastodon/reducers/custom_emojis.js

-import { List as ImmutableList } from 'immutable';
-import { STORE_HYDRATE } from '../actions/store';
+import { List as ImmutableList, fromJS as ConvertToImmutable } from 'immutable';
+import { CUSTOM_EMOJIS_FETCH_SUCCESS } from '../actions/custom_emojis';
 import { search as emojiSearch } from '../features/emoji/emoji_mart_search_light';
 import { buildCustomEmojis } from '../features/emoji/emoji';
 
-const initialState = ImmutableList();
+const initialState = ImmutableList([]);
 
 export default function custom_emojis(state = initialState, action) {
-  switch(action.type) {
-  case STORE_HYDRATE:
-    emojiSearch('', { custom: buildCustomEmojis(action.state.get('custom_emojis', [])) });
-    return action.state.get('custom_emojis');
-  default:
-    return state;
+  if(action.type === CUSTOM_EMOJIS_FETCH_SUCCESS) {
+    state = ConvertToImmutable(action.custom_emojis);
+    emojiSearch('', { custom: buildCustomEmojis(state) });
   }
+
+  return state;
 };

app/serializers/initial_state_serializer.rb

@@ -4,12 +4,6 @@ class InitialStateSerializer < ActiveModel::Serializer
   attributes :meta, :compose, :accounts,
              :media_attachments, :settings, :push_subscription
 
-  has_many :custom_emojis, serializer: REST::CustomEmojiSerializer
-
-  def custom_emojis
-    CustomEmoji.local.where(disabled: false)
-  end
-
   def meta
     store = {
       streaming_api_base_url: Rails.configuration.x.streaming_api_base_url,