better loading feedback for app start, move from JS to CSS

core/css/header.css

@@ -26,7 +26,9 @@
 	display: inline-block;
 	position: absolute;
 	left: 70px;
-	top: 18px;
+	height: 27px;
+	padding-top: 18px;
+	padding-right: 10px;
 }
 
 /* show appname next to logo */
@@ -89,6 +91,7 @@
 	display: inline-block;
 }
 #navigation a {
+	position: relative;
 	width: 80px;
 	height: 80px;
 	display: inline-block;
@@ -118,6 +121,25 @@
 	height: initial;
 }
 
+
+/* loading feedback for apps */
+#navigation .app-loading .icon-loading-dark {
+	display: inline !important;
+	position: absolute;
+	top: 20px;
+	left: 24px;
+	width: 32px;
+	height: 32px;
+	background-color: rgba(0, 0, 0, .2);
+	border-radius: 50%;
+}
+#navigation .app-loading .icon {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+	filter: alpha(opacity=20);
+	opacity: .2;
+}
+
+
 /* shift to account for missing navigation */
 #body-user #controls,
 #body-settings #controls {

core/js/js.js

@@ -1126,7 +1126,7 @@ function initCore() {
 			if(!$app.is('a')) {
 				$app = $app.closest('a');
 			}
-			$app.find('img').attr('src', OC.imagePath('core','loading-dark.gif'));
+			$app.addClass('app-loading');
 		});
 	}
 

core/templates/layout.user.php

@@ -99,6 +99,7 @@
 						<a href="<?php print_unescaped($entry['href']); ?>" title=""
 							<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
 							<img class="icon svg" alt="" src="<?php print_unescaped($entry['icon']); ?>"/>
+							<div class="icon-loading-dark" style="display:none;"></div>
 							<span>
 								<?php p($entry['name']); ?>
 							</span>