Improve appearance of short-lived app loading spinner

by hiding it for 500ms - thereby only showing it if the loading is
taking a long time.
pull/21833/head
Luke Barnard 2018-05-09 16:41:45 +01:00
parent 0a326dc6a0
commit 770e2d400e
2 changed files with 14 additions and 1 deletions

View File

@ -266,6 +266,19 @@ form.mx_Custom_Widget_Form div {
right: 0;
}
.mx_AppLoading_spinner_fadeIn {
animation-fill-mode: backwards;
animation-duration: 200ms;
animation-delay: 500ms;
animation-name: mx_AppLoading_spinner_fadeIn_animation;
}
@keyframes mx_AppLoading_spinner_fadeIn_animation {
from { opacity: 0 }
to { opacity: 1 }
}
.mx_AppLoading iframe {
display: none;
}

View File

@ -529,7 +529,7 @@ export default class AppTile extends React.Component {
if (this.props.show) {
const loadingElement = (
<div>
<div className="mx_AppLoading_spinner_fadeIn">
<MessageSpinner msg='Loading...' />
</div>
);