Show the loading icon until React app is actually rendered

src/browser/components/MattermostView.jsx

@@ -45,12 +45,6 @@ const MattermostView = createReactClass({
     var self = this;
     var webview = findDOMNode(this.refs.webview);
 
-    webview.addEventListener('did-finish-load', () => {
-      self.setState({
-        isLoaded: true
-      });
-    });
-
     webview.addEventListener('did-fail-load', (e) => {
       console.log(self.props.name, 'webview did-fail-load', e);
       if (e.errorCode === -3) { // An operation was aborted (due to user action).
@@ -123,6 +117,11 @@ const MattermostView = createReactClass({
 
     webview.addEventListener('ipc-message', (event) => {
       switch (event.channel) {
+      case 'onGuestInitialized':
+        self.setState({
+          isLoaded: true
+        });
+        break;
       case 'onUnreadCountChange':
         var unreadCount = event.args[0];
         var mentionCount = event.args[1];
@@ -249,10 +248,12 @@ const MattermostView = createReactClass({
     }
 
     const loadingImage = !this.state.errorInfo && this.props.active && !this.state.isLoaded ? (
-      <img
+      <div className='mattermostView-loadingScreen'>
-        className='mattermostView-loadingImage'
+        <img
-        src='../assets/loading.gif'
+          className='mattermostView-loadingImage'
-      />
+          src='../assets/loading.gif'
+        />
+      </div>
     ) : null;
 
     return (
@@ -260,13 +261,13 @@ const MattermostView = createReactClass({
         className={classNames.join(' ')}
       >
         { errorView }
-        { loadingImage }
         <webview
           id={this.props.id}
           preload={preloadJS}
           src={this.props.src}
           ref='webview'
         />
+        { loadingImage }
       </div>);
   }
 });

src/browser/webview/mattermost.js

@@ -11,6 +11,38 @@ Notification = EnhancedNotification; // eslint-disable-line no-global-assign, no
 
 Reflect.deleteProperty(global.Buffer); // http://electron.atom.io/docs/tutorial/security/#buffer-global
 
+function isReactAppInitialized() {
+  const reactRoot = document.querySelector('div[data-reactroot]');
+  if (reactRoot === null) {
+    return false;
+  }
+  return reactRoot.children.length !== 0;
+}
+
+function watchReactAppUntilInitialized(callback) {
+  let count = 0;
+  const interval = 500;
+  const timeout = 30000;
+  const timer = setInterval(() => {
+    count += interval;
+    if (isReactAppInitialized() || count >= timeout) { // assumed as webapp has been initialized.
+      clearTimeout(timer);
+      callback();
+    }
+  }, interval);
+}
+
+window.addEventListener('load', () => {
+  if (document.getElementById('root') === null) {
+    console.log('The guest is not assumed as mattermost-webapp');
+    ipc.sendToHost('onGuestInitialized');
+    return;
+  }
+  watchReactAppUntilInitialized(() => {
+    ipc.sendToHost('onGuestInitialized');
+  });
+});
+
 function hasClass(element, className) {
   var rclass = /[\t\r\n\f]/g;
   if ((' ' + element.className + ' ').replace(rclass, ' ').indexOf(className) > -1) {