Use a Mattermost animation icon when loading a page in the app
This commit is contained in:
parent
e14ff7bc2a
commit
616465748b
|
@ -30,7 +30,8 @@ const MattermostView = createReactClass({
|
||||||
return {
|
return {
|
||||||
errorInfo: null,
|
errorInfo: null,
|
||||||
isContextMenuAdded: false,
|
isContextMenuAdded: false,
|
||||||
reloadTimeoutID: null
|
reloadTimeoutID: null,
|
||||||
|
isLoaded: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -44,6 +45,12 @@ const MattermostView = createReactClass({
|
||||||
var self = this;
|
var self = this;
|
||||||
var webview = findDOMNode(this.refs.webview);
|
var webview = findDOMNode(this.refs.webview);
|
||||||
|
|
||||||
|
webview.addEventListener('did-finish-load', () => {
|
||||||
|
self.setState({
|
||||||
|
isLoaded: true
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
webview.addEventListener('did-fail-load', (e) => {
|
webview.addEventListener('did-fail-load', (e) => {
|
||||||
console.log(self.props.name, 'webview 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).
|
if (e.errorCode === -3) { // An operation was aborted (due to user action).
|
||||||
|
@ -51,7 +58,8 @@ const MattermostView = createReactClass({
|
||||||
}
|
}
|
||||||
|
|
||||||
self.setState({
|
self.setState({
|
||||||
errorInfo: e
|
errorInfo: e,
|
||||||
|
isLoaded: true
|
||||||
});
|
});
|
||||||
function reload() {
|
function reload() {
|
||||||
window.removeEventListener('online', reload);
|
window.removeEventListener('online', reload);
|
||||||
|
@ -161,7 +169,8 @@ const MattermostView = createReactClass({
|
||||||
clearTimeout(this.state.reloadTimeoutID);
|
clearTimeout(this.state.reloadTimeoutID);
|
||||||
this.setState({
|
this.setState({
|
||||||
errorInfo: null,
|
errorInfo: null,
|
||||||
reloadTimeoutID: null
|
reloadTimeoutID: null,
|
||||||
|
isLoaded: false
|
||||||
});
|
});
|
||||||
var webview = findDOMNode(this.refs.webview);
|
var webview = findDOMNode(this.refs.webview);
|
||||||
webview.reload();
|
webview.reload();
|
||||||
|
@ -235,16 +244,25 @@ const MattermostView = createReactClass({
|
||||||
if (this.props.withTab) {
|
if (this.props.withTab) {
|
||||||
classNames.push('mattermostView-with-tab');
|
classNames.push('mattermostView-with-tab');
|
||||||
}
|
}
|
||||||
if (!this.props.active) {
|
if (!this.props.active || this.state.errorInfo) {
|
||||||
classNames.push('mattermostView-hidden');
|
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 (
|
return (
|
||||||
<div>
|
<div
|
||||||
|
className={classNames.join(' ')}
|
||||||
|
>
|
||||||
{ errorView }
|
{ errorView }
|
||||||
|
{ loadingImage }
|
||||||
<webview
|
<webview
|
||||||
id={this.props.id}
|
id={this.props.id}
|
||||||
className={classNames.join(' ')}
|
|
||||||
preload={preloadJS}
|
preload={preloadJS}
|
||||||
src={this.props.src}
|
src={this.props.src}
|
||||||
ref='webview'
|
ref='webview'
|
||||||
|
|
|
@ -1,4 +1,12 @@
|
||||||
.mattermostView {
|
.mattermostView {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mattermostView .ErrorView {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mattermostView webview {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
|
@ -6,12 +14,17 @@
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mattermostView-with-tab {
|
.mattermostView-with-tab webview {
|
||||||
top: 32px;
|
top: 31px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mattermostView-hidden {
|
.mattermostView-hidden webview {
|
||||||
flex: 0 1;
|
flex: 0 1;
|
||||||
width: 0px;
|
width: 0px;
|
||||||
height: 0px;
|
height: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mattermostView-loadingImage {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 64px;
|
||||||
|
}
|
||||||
|
|
|
@ -77,8 +77,7 @@ describe('browser/index.html', function desc() {
|
||||||
isVisible('#mattermostView0').then((visible) => visible.should.be.true).
|
isVisible('#mattermostView0').then((visible) => visible.should.be.true).
|
||||||
isVisible('#mattermostView1').then((visible) => visible.should.be.false).
|
isVisible('#mattermostView1').then((visible) => visible.should.be.false).
|
||||||
click('#teamTabItem1').
|
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);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue