Wait until All Thumbnails Loaded. #361

* Wait until all thumbnails is loaded before display on screen. * Sort captures descendingly in groups. * Fix linting error: template-no-negated-async * Show thumbnail even if the publishing fails.
numbersprotocol · Dec 16, 2020 · d59eb34 · d59eb34
1 parent 7d10b0f
commit d59eb34
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
@@ -43,7 +43,9 @@
       <button routerLink="inbox" mat-icon-button>
         <mat-icon
           matBadge="&#8288;"
-          [matBadgeHidden]="!(inboxCount$ | async)"
+          [matBadgeHidden]="
+            (inboxCount$ | async) === null || (inboxCount$ | async) === 0
+          "
           matBadgeSize="small"
           matBadgeColor="warn"
         >
@@ -73,7 +75,7 @@
                   class="square-image-tile"
                   [style.backgroundImage]="
                     'url(data:image/*;base64,' +
-                    (capture.proofWithThumbnail.thumbnailBase64$ | async)!
+                    capture.proofWithThumbnail.thumbnailBase64
                   "
                   [routerLink]="['asset', { id: capture.asset.id }]"
                 >
@@ -83,7 +85,7 @@
                     class="square-image-tile"
                     [style.backgroundImage]="
                       'url(data:image/*;base64,' +
-                      (capture.proofWithThumbnail.thumbnailBase64$ | async)!
+                      capture.proofWithThumbnail.thumbnailBase64
                     "
                   >
                     <div

diff --git a/src/app/pages/home/home.page.ts b/src/app/pages/home/home.page.ts
@@ -4,7 +4,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { groupBy, isEqual } from 'lodash';
+import { groupBy, isEqual, sortBy } from 'lodash';
 import { combineLatest, defer } from 'rxjs';
 import { concatMap, distinctUntilChanged, first, map } from 'rxjs/operators';
 import { CollectorService } from '../../services/collector/collector.service';
@@ -24,6 +24,9 @@ import { capture } from '../../utils/camera';
 })
 export class HomePage {
   readonly capturesByDate$ = this.getCaptures$().pipe(
+    map(captures =>
+      sortBy(captures, c => -c.proofWithThumbnail.proof.timestamp)
+    ),
     map(captures =>
       groupBy(captures, c =>
         formatDate(
@@ -79,11 +82,13 @@ export class HomePage {
 
   private getCaptures$() {
     const proofsWithThumbnail$ = this.proofRepository.getAll$().pipe(
-      map(proofs =>
-        proofs.map(proof => ({
-          proof,
-          thumbnailBase64$: defer(() => proof.getThumbnailBase64()),
-        }))
+      concatMap(proofs =>
+        Promise.all(
+          proofs.map(async proof => ({
+            proof,
+            thumbnailBase64: await proof.getThumbnailBase64(),
+          }))
+        )
       )
     );