Use a Mattermost animation icon when loading a page in the app

src/browser/components/MattermostView.jsx

@@ -30,7 +30,8 @@ const MattermostView = createReactClass({
     return {
       errorInfo: null,
       isContextMenuAdded: false,
-      reloadTimeoutID: null
+      reloadTimeoutID: null,
+      isLoaded: false
     };
   },
 
@@ -44,6 +45,12 @@ 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).
@@ -51,7 +58,8 @@ const MattermostView = createReactClass({
       }
 
       self.setState({
-        errorInfo: e
+        errorInfo: e,
+        isLoaded: true
       });
       function reload() {
         window.removeEventListener('online', reload);
@@ -161,7 +169,8 @@ const MattermostView = createReactClass({
     clearTimeout(this.state.reloadTimeoutID);
     this.setState({
       errorInfo: null,
-      reloadTimeoutID: null
+      reloadTimeoutID: null,
+      isLoaded: false
     });
     var webview = findDOMNode(this.refs.webview);
     webview.reload();
@@ -235,16 +244,25 @@ const MattermostView = createReactClass({
     if (this.props.withTab) {
       classNames.push('mattermostView-with-tab');
     }
-    if (!this.props.active) {
+    if (!this.props.active || this.state.errorInfo) {
       classNames.push('mattermostView-hidden');
     }
 
+    const loadingImage = !this.state.errorInfo && this.props.active && !this.state.isLoaded ? (
+      <img
+        className='mattermostView-loadingImage'
+        src='../assets/loading.gif'
+      />
+    ) : null;
+
     return (
-      <div>
+      <div
+        className={classNames.join(' ')}
+      >
         { errorView }
+        { loadingImage }
         <webview
           id={this.props.id}
-          className={classNames.join(' ')}
           preload={preloadJS}
           src={this.props.src}
           ref='webview'

src/browser/css/components/MattermostView.css

@@ -1,4 +1,12 @@
 .mattermostView {
+  text-align: center;
+}
+
+.mattermostView .ErrorView {
+  text-align: left;
+}
+
+.mattermostView webview {
   position: absolute;
   top: 0px;
   right: 0px;
@@ -6,12 +14,17 @@
   left: 0px;
 }
 
-.mattermostView-with-tab {
+.mattermostView-with-tab webview {
-  top: 32px;
+  top: 31px;
 }
 
-.mattermostView-hidden {
+.mattermostView-hidden webview {
   flex: 0 1;
   width: 0px;
   height: 0px;
 }
+
+.mattermostView-loadingImage {
+  text-align: center;
+  margin-top: 64px;
+}

test/specs/browser/index_test.js

@@ -77,9 +77,8 @@ describe('browser/index.html', function desc() {
       isVisible('#mattermostView0').then((visible) => visible.should.be.true).
       isVisible('#mattermostView1').then((visible) => visible.should.be.false).
       click('#teamTabItem1').
-      pause(1000).
+      waitForVisible('#mattermostView1', 2000).
-      isVisible('#mattermostView1').then((visible) => visible.should.be.true).
+      isVisible('#mattermostView0').then((visible) => visible.should.be.false);
-    isVisible('#mattermostView0').then((visible) => visible.should.be.false);
   });
 
   it('should show error when using incorrect URL', () => {