From 86b311361ecd64acfe262ce2c0d3f3e8ca9b4e9a Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Wed, 13 Apr 2016 05:19:14 +0300
Subject: [PATCH] added animated spinner to metadata viewer (not final)...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/css/loader.css       | 66 ++++++++++++++++++++++++++++++++++
 ui (gen4)/features/metadata.js | 12 ++++++-
 ui (gen4)/index.html           |  2 ++
 3 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100755 ui (gen4)/css/loader.css

diff --git a/ui (gen4)/css/loader.css b/ui (gen4)/css/loader.css
new file mode 100755
index 00000000..6a01d8e5
--- /dev/null
+++ b/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;
+	}
+}
+
diff --git a/ui (gen4)/features/metadata.js b/ui (gen4)/features/metadata.js
index 77d3759a..eefcc3ec 100755
--- a/ui (gen4)/features/metadata.js	
+++ b/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()
 					})
 				}
 			}],
diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html
index 969a8cff..b576156c 100755
--- a/ui (gen4)/index.html	
+++ b/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>