From 2055c1f27b6c31013784167e1867c65559cbf719 Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Thu, 12 Jul 2018 17:05:29 -0400
Subject: [PATCH] Dont display categories until images are ready

---
 src/app/store/categories.component.html | 16 +++++++++-------
 src/app/store/categories.component.ts   |  1 +
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/app/store/categories.component.html b/src/app/store/categories.component.html
index 50ba706..1a43048 100644
--- a/src/app/store/categories.component.html
+++ b/src/app/store/categories.component.html
@@ -1,11 +1,13 @@
 <div class="container">
     <div class="row py-5">
-        <mat-card *ngFor="let c of categories | async">
-            <img mat-card-image [src]="c.image | async" [alt]="c.name">
-            <mat-divider class="custom-line"></mat-divider>
-            <mat-card-content>
-                <h3>{{c.name}}</h3>
-            </mat-card-content>
-        </mat-card>
+        <ng-container *ngFor="let c of categories | async">
+            <mat-card *ngIf="c.ready">
+                <img mat-card-image [src]="c.image | async" [alt]="c.name">
+                <mat-divider class="custom-line"></mat-divider>
+                <mat-card-content>
+                    <h3>{{c.name}}</h3>
+                </mat-card-content>
+            </mat-card>
+        </ng-container>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/store/categories.component.ts b/src/app/store/categories.component.ts
index 9d2e32b..f9e1604 100644
--- a/src/app/store/categories.component.ts
+++ b/src/app/store/categories.component.ts
@@ -18,6 +18,7 @@ export class CategoriesComponent {
         map(rows =>
           rows.map((row: any) => {
             row.image = this.storage.ref(`${row.name.toLowerCase()}.jpg`).getDownloadURL();
+            row.image.subscribe(() => (row.ready = true));
             return row;
           })
         )