Dont display categories until images are ready

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>

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;
           })
         )