Merge pull request #1885 from matrix-org/luke/feature-app-tile-spinne…

…r-delay2 Improve appearance of short-lived app loading spinner
matrix-org · May 9, 2018 · d304e0a · d304e0a
2 parents 7d0406b + 0c18466
commit d304e0a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
@@ -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;
 }
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
@@ -534,7 +534,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>
             );