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 * 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. * @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 * @return {Object} Updated component state to be set with setState
*/ */
_getNewUrlState(props) { _getNewUrlState(props) {
const widgetPermissionId = [props.room.roomId, encodeURIComponent(props.url)].join('_'); const widgetPermissionId = [props.room.roomId, encodeURIComponent(props.url)].join('_');
const hasPermissionToLoad = localStorage.getItem(widgetPermissionId); const hasPermissionToLoad = localStorage.getItem(widgetPermissionId);
return { return {
loading: true, initialising: true, // True while we are mangling the widget URL
widgetUrl: props.url, loading: true, // True while the iframe content is loading
widgetPermissionId: widgetPermissionId, widgetUrl: props.url,
// 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 widgetPermissionId: widgetPermissionId,
hasPermissionToLoad: hasPermissionToLoad === 'true' || props.userId === props.creatorUserId, // 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
error: null, hasPermissionToLoad: hasPermissionToLoad === 'true' || props.userId === props.creatorUserId,
deleting: false, error: null,
}; deleting: false,
};
}, },
getInitialState() { getInitialState() {
return this._getNewUrlState(this.props); return this._getNewUrlState(this.props);
}, },
/** /**
@ -119,21 +119,24 @@ export default React.createClass({
componentWillMount() { componentWillMount() {
window.addEventListener('message', this._onMessage, false); window.addEventListener('message', this._onMessage, false);
this.updateWidgetContent();
},
updateWidgetContent() {
this.setState(this._getNewUrlState());
// Set scalar token on the wUrl, if needed
this.setScalarToken(); 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() { setScalarToken() {
if (!this.isScalarUrl(this.props.url)) { if (!this.isScalarUrl(this.props.url)) {
this.setState({
error: null,
widgetUrl: this.props.url,
initialising: false,
});
return; 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) { if (!this._scalarClient) {
this._scalarClient = new ScalarAuthClient(); this._scalarClient = new ScalarAuthClient();
} }
@ -150,12 +153,12 @@ export default React.createClass({
this.setState({ this.setState({
error: null, error: null,
widgetUrl: u.format(), widgetUrl: u.format(),
loading: false, initialising: false,
}); });
}, (err) => { }, (err) => {
this.setState({ this.setState({
error: err.message, error: err.message,
loading: false, initialising: false,
}); });
}); });
}, },
@ -166,7 +169,8 @@ export default React.createClass({
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.url !== this.props.url) { 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.props.show) {
if (this.state.loading) { if (this.state.initialising) {
appTileBody = ( appTileBody = (
<div className='mx_AppTileBody mx_AppLoading'> <div className='mx_AppTileBody mx_AppLoading'>
<MessageSpinner msg='Loading...' /> <MessageSpinner msg='Loading...' />
</div> </div>
); );
} else if (this.state.hasPermissionToLoad == true) { } else if (this.state.hasPermissionToLoad == true) {
const loadingElement = (
<div className="mx_AppTileBody">
<AppWarning
errorMsg="Error - Mixed content"
/>
</div>
);
if (this.isMixedContent()) { if (this.isMixedContent()) {
appTileBody = ( appTileBody = loadingElement;
<div className="mx_AppTileBody">
<AppWarning
errorMsg="Error - Mixed content"
/>
</div>
);
} else { } else {
appTileBody = ( appTileBody = (
<div className="mx_AppTileBody"> <div className={this.loading ? 'mx_AppTileBody mx_AppLoading' : 'mx_AppTileBody'}>
{ this.loading && Element }
<iframe <iframe
ref="appFrame" ref="appFrame"
src={safeWidgetUrl} src={safeWidgetUrl}