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 {
|
||||
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'
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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', () => {
|
||||
|
|
Loading…
Reference in a new issue