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.

Author: lukebarnard1

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;
 }

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>
             );