Load spinner

Signed-off-by: James Ketrenos <james_git@ketrenos.com>

frontend/elements/photo-lightbox.html

@@ -5,6 +5,7 @@
 <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
+<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
 </head>
 
 <dom-module id="photo-lightbox">
@@ -27,7 +28,7 @@
 
   #image {
     display: inline-block;
-    position: relative;
+    position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
@@ -39,9 +40,29 @@
     -webkit-transition: opacity 0.5s ease-in-out;
     pointer-events: none;
   }
+
+  #overlay {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  #overlay > div {
+    height: 100%;
+  }
   </style>
 
-  <div id="image"></div>
+  <div id="image">
+  </div>
+
+  <div id="overlay" class="layout vertical center">
+    <div class="layout horizontal center">
+      <paper-spinner hidden$="[[!loading]]" active$="[[loading]]" class="thin"></paper-spinner>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -54,6 +75,10 @@ Polymer({
     },
     "thumb": {
       type: String
+    },
+    loading: {
+      type: Boolean,
+      value: false
     }
   },
 
@@ -163,15 +188,16 @@ Polymer({
       this.waitUntil = 0;
     }
     this.$.image.style.opacity = 0;
-    this.style.borderColor = 'orange';
 
     this.image = new Image();
-    this.loading = image;
+    this.requested = image;
+    this.loading = true;
 
     this.image.onload = function(src) {
+      this.loading = false;
       var remaining = Math.max(this.waitUntil - Date.now() / 1000, 0);
       this.async(function() {
-        if (!this.image || this.loading != src) {
+        if (!this.image || this.requested != src) {
           return;
         }