Merge pull request #5 from kidshenlong/image-holder

Updating stacks with place holder while loading.

Author: michaelpm91

app/library/library.component.html

@@ -1,6 +1,6 @@
 <!--<div class="shelf" ng2FileDrop [uploader]="uploadService.uploader" (fileOver)="fileOver($event)" [class.transparent]="isTransparent">-->
 <div class="shelf" (fileOver)="fileOver($event)" [class.transparent]="isTransparent">
-    <stack *ngFor="let thisSeries of series" [stackType]="'series'" [stackData]="thisSeries"></stack>
+    <stack *ngFor="let thisSeries of series" [stackType]="'series'" [stackData]="thisSeries" [stackImage]="thisSeries.cover_image"></stack>
 </div>
 
 

app/series/series.component.html

@@ -1 +1 @@
-<stack *ngFor="let comic of comics" [stackType]="'comic'"  [stackData]="comic"></stack>
+<stack *ngFor="let comic of comics" [stackType]="'comic'" [stackData]="comic" [stackImage]="comic.comic_book_archive_contents[0]"></stack>

app/shared/stack/stack.component.html

@@ -1,6 +1,6 @@
 <a [routerLink]="['/' + stackType, stackData.id]">
-    <img *ngIf="stackType=='series'" [src]="stackData.cover_image">
-    <img *ngIf="stackType=='comic'" [src]="stackData.comic_book_archive_contents[0]">
+    <img [hidden]="!isStackImageLoaded" [src]="stackImage" (load)="stackImageLoaded($event)">
+    <img *ngIf="!isStackImageLoaded" src="/images/comic-cloud-image-holder.png">
     <div class="information" *ngIf="stackType=='series'">{{stackData.title}} ({{stackData.start_year}})</div>
     <div class="information" *ngIf="stackType=='comic'" >#{{stackData.issue}}</div>
 </a>

app/shared/stack/stack.component.ts

@@ -14,5 +14,12 @@ export class StackComponent {
     //@Input() //Declares a data-bound input property.
     @Input() stackData: string[];//todo this type should ideally be an abstract class that all stack types (ie comic, series, reading list) implement
     @Input() stackType: string;
+    @Input() stackImage: string;
 
+    isStackImageLoaded: boolean = false;
+
+    stackImageLoaded(event){
+        this.isStackImageLoaded = true;
+        console.log(event);
+    }
 }