From 3eb6cd2a6f8e6d8414b5212bfd37c45159beef2b Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Tue, 11 Oct 2016 07:07:09 +0300
Subject: [PATCH] #180: do not render app till all fonts will be loaded

---
 package.json |  1 +
 src/index.js | 28 +++++++++++++++++++++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index ddc325d..0f4c716 100644
--- a/package.json
+++ b/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": {
diff --git a/src/index.js b/src/index.js
index df24383..4dc57ae 100644
--- a/src/index.js
+++ b/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