fhsons/website
fhsons/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Dont display categories until images are ready

Browse Source
This commit is contained in:
Zakary Timson 2018-07-12 17:05:29 -04:00
parent 10db284541
commit 2055c1f27b
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/store/categories.component.html
View File

@ -1,11 +1,13 @@
<div class="container"> <div class="container">
<div class="row py-5"> <div class="row py-5">
<mat-card *ngFor="let c of categories | async"> <ng-container *ngFor="let c of categories | async">
<mat-card *ngIf="c.ready">
<img mat-card-image [src]="c.image | async" [alt]="c.name"> <img mat-card-image [src]="c.image | async" [alt]="c.name">
<mat-divider class="custom-line"></mat-divider> <mat-divider class="custom-line"></mat-divider>
<mat-card-content> <mat-card-content>
<h3>{{c.name}}</h3> <h3>{{c.name}}</h3>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</ng-container>
</div> </div>
</div> </div>

1
src/app/store/categories.component.ts
View File

@ -18,6 +18,7 @@ export class CategoriesComponent {
map(rows => map(rows =>
rows.map((row: any) => { rows.map((row: any) => {
row.image = this.storage.ref(`${row.name.toLowerCase()}.jpg`).getDownloadURL(); row.image = this.storage.ref(`${row.name.toLowerCase()}.jpg`).getDownloadURL();
row.image.subscribe(() => (row.ready = true));
return row; return row;
}) })
) )