Load fonts using FontFaceObserver

client/package.json

@@ -41,6 +41,7 @@
     "autolinker": "^1.4.3",
     "backo": "^1.1.0",
     "base64-arraybuffer": "^0.1.5",
+    "fontfaceobserver": "^2.0.9",
     "history": "4.5.1",
     "immutable": "^3.8.1",
     "lodash": "^4.17.4",

client/src/js/actions/message.js

@@ -74,12 +74,12 @@ export function fetchMessages() {
   };
 }
 
-export function updateMessageHeight() {
-  return (dispatch, getState) => dispatch({
+export function updateMessageHeight(wrapWidth, charWidth) {
+  return {
     type: actions.UPDATE_MESSAGE_HEIGHT,
-    wrapWidth: getState().environment.get('wrapWidth'),
-    charWidth: getState().environment.get('charWidth')
-  });
+    wrapWidth,
+    charWidth
+  };
 }
 
 export function sendMessage(content, to, server) {

client/src/js/containers/Chat.js

@@ -12,27 +12,14 @@ import { part } from '../actions/channel';
 import { openPrivateChat, closePrivateChat } from '../actions/privateChat';
 import { searchMessages, toggleSearch } from '../actions/search';
 import { select } from '../actions/tab';
-import { runCommand, sendMessage, updateMessageHeight, fetchMessages } from '../actions/message';
+import { runCommand, sendMessage, fetchMessages } from '../actions/message';
 import { disconnect } from '../actions/server';
-import { setWrapWidth, setCharWidth } from '../actions/environment';
-import { stringWidth } from '../util';
 import { toggleUserList } from '../actions/ui';
 import * as inputHistoryActions from '../actions/inputHistory';
 import { getSelectedTab } from '../reducers/tab';
 import { getSelectedMessages } from '../reducers/messages';
 
-function updateCharWidth() {
-  const charWidth = stringWidth(' ', '16px Roboto Mono, monospace');
-  window.messageIndent = 6 * charWidth;
-  return setCharWidth(charWidth);
-}
-
 class Chat extends PureComponent {
-  componentWillMount() {
-    const { dispatch } = this.props;
-    setTimeout(() => dispatch(updateCharWidth()), 1000);
-  }
-
   handleSearch = phrase => {
     const { dispatch, tab } = this.props;
     if (tab.isChannel()) {
@@ -82,8 +69,6 @@ class Chat extends PureComponent {
           messages={messages}
           hasMoreMessages={hasMoreMessages}
           tab={tab}
-          setWrapWidth={this.props.setWrapWidth}
-          updateMessageHeight={this.props.updateMessageHeight}
           onNickClick={this.handleMessageNickClick}
           onFetchMore={this.handleFetchMore}
         />
@@ -169,9 +154,7 @@ function mapDispatchToProps(dispatch) {
       part,
       disconnect,
       openPrivateChat,
-      closePrivateChat,
-      setWrapWidth,
-      updateMessageHeight
+      closePrivateChat
     }, dispatch),
     inputActions: bindActionCreators(inputHistoryActions, dispatch)
   };

client/src/js/index.js

@@ -49,12 +49,12 @@ if (env.users) {
   });
 }
 
-initWidthUpdates(store);
-
-if (env.messages) {
-  const { messages, server, to, next } = env.messages;
-  store.dispatch(addMessages(messages, server, to, false, next));
-}
+initWidthUpdates(store, () => {
+  if (env.messages) {
+    const { messages, server, to, next } = env.messages;
+    store.dispatch(addMessages(messages, server, to, false, next));
+  }
+});
 
 const renderRoot = () => {
   render(

client/src/js/reducers/environment.js

@@ -5,5 +5,11 @@ import * as actions from '../actions';
 export default createReducer(Map(), {
   [actions.SET_ENVIRONMENT](state, action) {
     return state.set(action.key, action.value);
+  },
+
+  [actions.UPDATE_MESSAGE_HEIGHT](state, action) {
+    return state
+      .set('wrapWidth', action.wrapWidth)
+      .set('charWidth', action.charWidth);
   }
 });

client/src/js/util/messageHeight.js

@@ -1,6 +1,6 @@
+import FontFaceObserver from 'fontfaceobserver';
 import { stringWidth, measureScrollBarWidth } from './index';
 import { updateMessageHeight } from '../actions/message';
-import { setCharWidth, setWrapWidth } from '../actions/environment';
 
 const lineHeight = 24;
 const menuWidth = 200;
@@ -9,16 +9,12 @@ const messagePadding = 30;
 const smallScreen = 600;
 let windowWidth;
 
-export function initWidthUpdates(store) {
-  const scrollBarWidth = measureScrollBarWidth();
-
-  const charWidth = stringWidth(' ', '16px Roboto Mono, monospace');
+function init(store, charWidth, done) {
   window.messageIndent = 6 * charWidth;
-  store.dispatch(setCharWidth(charWidth));
-
+  const scrollBarWidth = measureScrollBarWidth();
   let prevWrapWidth;
 
-  function updateWidth(delta, first) {
+  function updateWidth() {
     windowWidth = window.innerWidth;
     let wrapWidth = windowWidth - scrollBarWidth - messagePadding;
     if (windowWidth > smallScreen) {
@@ -27,11 +23,7 @@ export function initWidthUpdates(store) {
 
     if (wrapWidth !== prevWrapWidth) {
       prevWrapWidth = wrapWidth;
-
-      store.dispatch(setWrapWidth(wrapWidth));
-      if (!first) {
-        store.dispatch(updateMessageHeight());
-      }
+      store.dispatch(updateMessageHeight(wrapWidth, charWidth));
     }
   }
 
@@ -44,10 +36,30 @@ export function initWidthUpdates(store) {
     resizeRAF = window.requestAnimationFrame(updateWidth);
   }
 
-  updateWidth(0, true);
+  updateWidth();
+  done();
   window.addEventListener('resize', resize);
 }
 
+export function initWidthUpdates(store, done) {
+  let charWidth = localStorage.charWidth;
+  if (charWidth) {
+    init(store, parseFloat(charWidth), done);
+  }
+
+  new FontFaceObserver('Roboto Mono').load().then(() => {
+    if (!charWidth) {
+      charWidth = stringWidth(' ', '16px Roboto Mono');
+      init(store, charWidth, done);
+      localStorage.charWidth = charWidth;
+    }
+  });
+
+  new FontFaceObserver('Montserrat').load();
+  new FontFaceObserver('Montserrat', { weight: 700 }).load();
+  new FontFaceObserver('Roboto Mono', { weight: 700 }).load();
+}
+
 export function findBreakpoints(text) {
   const breakpoints = [];
 

client/yarn.lock

@@ -2377,6 +2377,10 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+fontfaceobserver@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.0.9.tgz#fb61e1053bd28d38cd4750a05b30f5130b32e97a"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"