added animated spinner to metadata viewer (not final)...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen4)/css/loader.css

@@ -0,0 +1,66 @@
+/*
+* Source: http://projects.lukehaas.me/css-loaders/
+*/
+.loader:before,
+.loader:after,
+.loader {
+	border-radius: 50%;
+	width: 1em;
+	height: 1em;
+
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation: load7 1.8s infinite ease-in-out;
+	animation: load7 1.8s infinite ease-in-out;
+}
+.loader {
+	position: relative;
+
+	color: #ffffff;
+	font-size: 10px;
+	margin: 20px auto;
+
+	text-indent: -9999em;
+
+	-webkit-transform: translateZ(0);
+	-ms-transform: translateZ(0);
+	transform: translateZ(0);
+	-webkit-animation-delay: -0.16s;
+	animation-delay: -0.16s;
+}
+.loader:before {
+	left: -1.7em;
+
+	-webkit-animation-delay: -0.32s;
+	animation-delay: -0.32s;
+}
+.loader:after {
+	left: 1.7em;
+}
+.loader:before,
+.loader:after {
+	content: '';
+	position: absolute;
+	top: 0;
+}
+@-webkit-keyframes load7 {
+	0%,
+	80%,
+	100% {
+		box-shadow: 0 1em 0 -0.6em;
+	}
+	40% {
+		box-shadow: 0 1em 0 0;
+	}
+}
+@keyframes load7 {
+	0%,
+	80%,
+	100% {
+		box-shadow: 0 1em 0 -0.6em;
+	}
+	40% {
+		box-shadow: 0 1em 0 0;
+	}
+}
+

ui (gen4)/features/metadata.js

@@ -537,8 +537,18 @@ module.MetadataFSUI = core.ImageGridFeatures.Feature({
 				var reader = this.readMetadata(image)
 
 				return reader && function(overlay){
+
+					var client = overlay.client
+					var data = client.options.data
+
+					data.push('---')
+					//data.push($('<center>Loading...</center>'))
+					data.push($('<center><div class="loader"/></center>'))
+
+					client.update()
+
 					reader.then(function(data){
-						overlay.client.updateMetadata()
+						client.updateMetadata()
 					})
 				}
 			}],

ui (gen4)/index.html

@@ -11,6 +11,8 @@
 <link rel="stylesheet" href="css/widget/overlay.css">
 <link rel="stylesheet" href="css/widget/drawer.css">
 
+<link rel="stylesheet" href="css/loader.css">
+
 <!-- XXX remove before use... -->
 <style>