Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 22:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix loading and initialisation spinners.

Browse Source
This commit is contained in:
Richard Lewis 2017-11-02 18:33:11 +00:00
parent a52bb9d603
commit 0e854ee356
1 changed files with 39 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/views/elements/AppTile.js
View File

@ -58,28 +58,28 @@ export default React.createClass({
};
},
/**
* Set initial component state when the App wUrl (widget URL) is being updated
* @param {Object} props The component props *must* be passed (rather than using this.props) so that it can be called with future props, e.g. from componentWillReceiveProps.
* @return {Object} Updated component state to be set with setState
*/
_getNewUrlState(props) {
const widgetPermissionId = [props.room.roomId, encodeURIComponent(props.url)].join('_');
const hasPermissionToLoad = localStorage.getItem(widgetPermissionId);
return {
loading: true,
widgetUrl: props.url,
widgetPermissionId: widgetPermissionId,
// Assume that widget has permission to load if we are the user who added it to the room, or if explicitly granted by the user
hasPermissionToLoad: hasPermissionToLoad === 'true' || props.userId === props.creatorUserId,
error: null,
deleting: false,
};
const widgetPermissionId = [props.room.roomId, encodeURIComponent(props.url)].join('_');
const hasPermissionToLoad = localStorage.getItem(widgetPermissionId);
return {
initialising: true, // True while we are mangling the widget URL
loading: true, // True while the iframe content is loading
widgetUrl: props.url,
widgetPermissionId: widgetPermissionId,
// Assume that widget has permission to load if we are the user who added it to the room, or if explicitly granted by the user
hasPermissionToLoad: hasPermissionToLoad === 'true' || props.userId === props.creatorUserId,
error: null,
deleting: false,
};
},
getInitialState() {
return this._getNewUrlState(this.props);
return this._getNewUrlState(this.props);
},
/**
@ -119,21 +119,24 @@ export default React.createClass({
componentWillMount() {
window.addEventListener('message', this._onMessage, false);
this.updateWidgetContent();
},
updateWidgetContent() {
this.setState(this._getNewUrlState());
// Set scalar token on the wUrl, if needed
this.setScalarToken();
},
// Adds a scalar token to the widget URL, if required
/**
* Adds a scalar token to the widget URL, if required
* Component initialisation is only complete when this function has resolved
*/
setScalarToken() {
if (!this.isScalarUrl(this.props.url)) {
this.setState({
error: null,
widgetUrl: this.props.url,
initialising: false,
});
return;
}
// Fetch the token before loading the iframe as we need to mangle the URL
// Fetch the token before loading the iframe as we need it to mangle the URL
if (!this._scalarClient) {
this._scalarClient = new ScalarAuthClient();
}
@ -150,12 +153,12 @@ export default React.createClass({
this.setState({
error: null,
widgetUrl: u.format(),
loading: false,
initialising: false,
});
}, (err) => {
this.setState({
error: err.message,
loading: false,
initialising: false,
});
});
},
@ -166,7 +169,8 @@ export default React.createClass({
componentWillReceiveProps(nextProps) {
if (nextProps.url !== this.props.url) {
this.updateWidgetContent(nextProps);
this._getNewUrlState(nextProps);
this.setScalarToken();
}
},
@ -308,24 +312,26 @@ export default React.createClass({
}
if (this.props.show) {
if (this.state.loading) {
if (this.state.initialising) {
appTileBody = (
<div className='mx_AppTileBody mx_AppLoading'>
<MessageSpinner msg='Loading...' />
</div>
);
} else if (this.state.hasPermissionToLoad == true) {
const loadingElement = (
<div className="mx_AppTileBody">
<AppWarning
errorMsg="Error - Mixed content"
/>
</div>
);
if (this.isMixedContent()) {
appTileBody = (
<div className="mx_AppTileBody">
<AppWarning
errorMsg="Error - Mixed content"
/>
</div>
);
appTileBody = loadingElement;
} else {
appTileBody = (
<div className="mx_AppTileBody">
<div className={this.loading ? 'mx_AppTileBody mx_AppLoading' : 'mx_AppTileBody'}>
{ this.loading && Element }
<iframe
ref="appFrame"
src={safeWidgetUrl}