Wait for locale to be loaded before rendering anything.

src/Uwave.js

@@ -8,10 +8,12 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { AppContainer as HotContainer } from 'react-hot-loader';
 import injectTapEventPlugin from 'react-tap-event-plugin';
+import createLocale from './locale';
 import AppContainer from './containers/App';
 import { get as readSession } from './utils/Session';
 import configureStore from './store/configureStore';
 import { initState, socketConnect, setJWT } from './actions/LoginActionCreators';
+import { languageSelector } from './selectors/settingSelectors';
 import * as api from './api';
 
 // Register default chat commands.
@@ -88,13 +90,21 @@ export default class Uwave {
       { mediaSources: this.sources, socketUrl: this.options.socketUrl }
     );
 
+    const localePromise = createLocale(
+      languageSelector(this.store.getState())
+    );
+
     if (this.jwt) {
       this.store.dispatch(setJWT(this.jwt));
       this.jwt = null;
     }
 
     this.store.dispatch(socketConnect());
-    return this.store.dispatch(initState()).then(() => {
+    return Promise.all([
+      localePromise,
+      this.store.dispatch(initState())
+    ]).then(([ locale ]) => {
+      this.locale = locale;
       this.resolveReady();
     });
   }
@@ -104,6 +114,7 @@ export default class Uwave {
       <Provider store={this.store}>
         <AppContainer
           mediaSources={this.sources}
+          locale={this.locale}
           uwave={this}
         />
       </Provider>

src/containers/App.js

@@ -5,9 +5,6 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import { I18nextProvider } from 'react-i18next';
-
-import createLocale from '../locale';
-
 import { closeAll } from '../actions/OverlayActionCreators';
 import { createTimer, stopTimer } from '../actions/TickerActionCreators';
 
@@ -40,6 +37,7 @@ export default class AppContainer extends React.Component {
     mediaSources: PropTypes.object.isRequired,
     uwave: PropTypes.object,
     language: PropTypes.string,
+    locale: PropTypes.object.isRequired,
     muiTheme: PropTypes.object,
     createTimer: PropTypes.func.isRequired,
     stopTimer: PropTypes.func.isRequired
@@ -64,12 +62,11 @@ export default class AppContainer extends React.Component {
     // Start the clock! üWave stores the current time in the application state
     // primarily to make sure that different timers in the UI update simultaneously.
     this.timerCallbacks = this.props.createTimer();
-    this.locale = createLocale(this.props.language);
   }
 
   componentWillReceiveProps(nextProps) {
     if (this.props.language !== nextProps.language) {
-      this.locale.changeLanguage(nextProps.language);
+      this.props.locale.changeLanguage(nextProps.language);
     }
   }
 
@@ -81,7 +78,7 @@ export default class AppContainer extends React.Component {
   render() {
     return (
       <MuiThemeProvider muiTheme={this.props.muiTheme}>
-        <I18nextProvider i18n={this.locale}>
+        <I18nextProvider i18n={this.props.locale}>
           <App {...this.props} />
         </I18nextProvider>
       </MuiThemeProvider>

src/locale.js

@@ -56,9 +56,11 @@ export const availableLanguages = [ 'en', ...Object.keys(resources) ];
 
 export default function createLocale(language) {
   const locale = i18next.cloneInstance();
-  locale.changeLanguage(language);
-
   locale.availableLanguages = availableLanguages;
 
-  return locale;
+  return new Promise((resolve) => {
+    locale.changeLanguage(language, () => {
+      resolve(locale);
+    });
+  });
 }