fix font not being changed on first page visit (if preferences havent been loaded before)

2 files changed, 13 insertions, 0 deletions

diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx
index 13045d732..0d1d9efd7 100644
--- a/web/react/components/channel_loader.jsx
+++ b/web/react/components/channel_loader.jsx
@@ -70,6 +70,7 @@ export default class ChannelLoader extends React.Component {
             Utils.applyTheme(Constants.THEMES.default);
         }
 
+        // if preferences have already been stored in local storage do not wait until preference store change is fired and handled in channel.jsx
         const selectedFont = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', {value: Constants.DEFAULT_FONT}).value;
         Utils.applyFont(selectedFont);
 
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx
index 49f0935a9..2122c729e 100644
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -18,9 +18,20 @@ import RegisterAppModal from '../components/register_app_modal.jsx';
 import ImportThemeModal from '../components/user_settings/import_theme_modal.jsx';
 import InviteMemberModal from '../components/invite_member_modal.jsx';
 
+import PreferenceStore from '../stores/preference_store.jsx';
+
+import * as Utils from '../utils/utils.jsx';
 import * as AsyncClient from '../utils/async_client.jsx';
 import * as EventHelpers from '../dispatcher/event_helpers.jsx';
 
+import Constants from '../utils/constants.jsx';
+
+function onPreferenceChange() {
+    const selectedFont = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', {value: Constants.DEFAULT_FONT}).value;
+    Utils.applyFont(selectedFont);
+    PreferenceStore.removeChangeListener(onPreferenceChange);
+}
+
 function setupChannelPage(props, team, channel) {
     if (props.PostId === '') {
         EventHelpers.emitChannelClickEvent(channel);
@@ -28,6 +39,7 @@ function setupChannelPage(props, team, channel) {
         EventHelpers.emitPostFocusEvent(props.PostId);
     }
 
+    PreferenceStore.addChangeListener(onPreferenceChange);
     AsyncClient.getAllPreferences();
 
     // ChannelLoader must be rendered first