improving thumbnail loading

frontend/app/gallery/grid/GridPhoto.ts

@@ -18,9 +18,29 @@ export class GridPhoto {
         return Utils.findClosest(renderSize, Config.Client.thumbnailSizes);
     }
 
+    getReplacementThumbnailSize() {
+        let size = this.getThumbnailSize();
+        for (let i = 0; i < this.photo.readyThumbnails.length; i++) {
+            if (this.photo.readyThumbnails[i] < size) {
+                return this.photo.readyThumbnails[i];
+            }
+        }
+        return null;
+    }
+
+    isReplacementThumbnailAvailable() {
+        return this.getReplacementThumbnailSize() !== null;
+    }
+    
     isThumbnailAvailable() {
         return this.photo.readyThumbnails.indexOf(this.getThumbnailSize()) != -1;
     }
+
+    getReplacementThumbnailPath() {
+        let size = this.getReplacementThumbnailSize();
+        return Utils.concatUrls("/api/gallery/content/", this.photo.directory.path, this.photo.directory.name, this.photo.name, "thumbnail", size.toString());
+
+    }
     
     getThumbnailPath() {
         let size = this.getThumbnailSize();

frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts

@@ -22,7 +22,7 @@ export class GalleryPhotoComponent implements IRenderable, AfterViewInit {
 
 
     image = {
-        src: "#",
+        src: '',
         show: false
     };
 
@@ -51,6 +51,22 @@ export class GalleryPhotoComponent implements IRenderable, AfterViewInit {
                 this.image.src = this.gridPhoto.getThumbnailPath();
                 this.image.show = true;
                 this.loading.show = false;
+            } else if (this.gridPhoto.isReplacementThumbnailAvailable()) {
+
+                this.image.src = this.gridPhoto.getReplacementThumbnailPath();
+                this.image.show = true;
+                this.loading.show = false;
+                this.thumbnailService.loadImage(this.gridPhoto,
+                    ()=> { //onLoadStarted
+                    },
+                    ()=> {//onLoaded
+                        this.image.src = this.gridPhoto.getThumbnailPath();
+                    },
+                    (error)=> {//onError
+                        //TODO: handle error
+                        console.error("something bad happened");
+                        console.error(error);
+                    });
             } else {
                 this.loading.show = true; 
                 this.thumbnailService.loadImage(this.gridPhoto,