From 770e2d400e53e9242bdc2b05e01ef67821c7877a Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Wed, 9 May 2018 16:41:45 +0100
Subject: [PATCH] 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.
---
 res/css/views/rooms/_AppsDrawer.scss     | 13 +++++++++++++
 src/components/views/elements/AppTile.js |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index 0cf3e7b9cb..28d432686d 100644
--- 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
index bf24da506b..7c4ab13c5a 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -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>
             );