#180: do not render app till all fonts will be loaded

package.json

@@ -34,6 +34,7 @@
     "react-router-redux": "^3.0.0",
     "redux": "^3.0.4",
     "redux-thunk": "^2.0.0",
+    "webfontloader": "^1.6.26",
     "whatwg-fetch": "^1.0.0"
   },
   "devDependencies": {

src/index.js

@@ -6,6 +6,8 @@ import ReactDOM from 'react-dom';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
 
+import webFont from 'webfontloader';
+
 import { factory as userFactory } from 'components/user/factory';
 import { IntlProvider } from 'components/i18n';
 import routesFactory from 'routes';
@@ -16,7 +18,22 @@ const store = storeFactory();
 
 bsodFactory(store, stopLoading);
 
-userFactory(store)
+const fontLoadingPromise = new Promise((resolve) =>
+    webFont.load({
+        classes: false,
+        active: resolve,
+        inactive: resolve, // TODO: may be we should track such cases
+        timeout: 2000,
+        custom: {
+            families: ['Roboto', 'Roboto Condensed']
+        }
+    })
+);
+
+Promise.all([
+    userFactory(store),
+    fontLoadingPromise
+])
 .then(() => {
     ReactDOM.render(
         <ReduxProvider store={store}>
@@ -33,6 +50,11 @@ userFactory(store)
     );
 });
 
+
+function stopLoading() {
+    document.getElementById('loader').classList.remove('is-active');
+}
+
 import scrollTo from 'components/ui/scrollTo';
 const SCROLL_ANCHOR_OFFSET = 80; // 50 + 30 (header height + some spacing)
 /**
@@ -64,10 +86,6 @@ function restoreScroll() {
     }, 200);
 }
 
-function stopLoading() {
-    document.getElementById('loader').classList.remove('is-active');
-}
-
 /* global process: false */
 if (process.env.NODE_ENV !== 'production') {
     // some shortcuts for testing on localhost