From 616465748b1bb924e112c38d1783b3b1e869c220 Mon Sep 17 00:00:00 2001
From: Yuya Ochiai <yuya0321@gmail.com>
Date: Fri, 27 Oct 2017 23:16:35 +0900
Subject: [PATCH] Use a Mattermost animation icon when loading a page in the
 app

---
 src/browser/components/MattermostView.jsx     | 30 +++++++++++++++----
 src/browser/css/components/MattermostView.css | 19 ++++++++++--
 test/specs/browser/index_test.js              |  5 ++--
 3 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/browser/components/MattermostView.jsx b/src/browser/components/MattermostView.jsx
index 3bb97a47..2f045a04 100644
--- a/src/browser/components/MattermostView.jsx
+++ b/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'
diff --git a/src/browser/css/components/MattermostView.css b/src/browser/css/components/MattermostView.css
index 8530511c..7a0313d3 100644
--- a/src/browser/css/components/MattermostView.css
+++ b/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 {
-  top: 32px;
+.mattermostView-with-tab webview {
+  top: 31px;
 }
 
-.mattermostView-hidden {
+.mattermostView-hidden webview {
   flex: 0 1;
   width: 0px;
   height: 0px;
 }
+
+.mattermostView-loadingImage {
+  text-align: center;
+  margin-top: 64px;
+}
diff --git a/test/specs/browser/index_test.js b/test/specs/browser/index_test.js
index 1a3f83e3..151e1a94 100644
--- a/test/specs/browser/index_test.js
+++ b/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).
-      isVisible('#mattermostView1').then((visible) => visible.should.be.true).
-    isVisible('#mattermostView0').then((visible) => visible.should.be.false);
+      waitForVisible('#mattermostView1', 2000).
+      isVisible('#mattermostView0').then((visible) => visible.should.be.false);
   });
 
   it('should show error when using incorrect URL', () => {