Skip to content

Commit c4c7ab7

Browse files
bafubafu
authored
Merge pull request #2200 from numbersprotocol/feat-lazy-load-captures
feat(capture-tab): implement pseudo lazy loading
2 parents 214e0de + c51defe commit c4c7ab7

File tree

4 files changed

+250
-199
lines changed

4 files changed

+250
-199
lines changed

‎src/app/features/home/capture-tab/capture-tab.component.html

Lines changed: 71 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,84 @@
1-
<ion-refresher slot="fixed" (ionRefresh)="refreshCaptures($event)">
2-
<ion-refresher-content></ion-refresher-content>
3-
</ion-refresher>
4-
<mat-card *transloco="let t" class="user-card" id="user-card">
5-
<app-avatar mat-card-avatar></app-avatar>
6-
<mat-card-header>
7-
<mat-card-title>{{ username$ | ngrxPush }}</mat-card-title>
8-
<div class="vertical-space-8"></div>
9-
<mat-card-subtitle>{{ email$ | ngrxPush }} </mat-card-subtitle>
10-
</mat-card-header>
11-
</mat-card>
12-
<app-uploading-bar></app-uploading-bar>
1+
<ion-content>
2+
<ion-refresher slot="fixed" (ionRefresh)="refreshCaptures($event)">
3+
<ion-refresher-content></ion-refresher-content>
4+
</ion-refresher>
5+
<mat-card *transloco="let t" class="user-card" id="user-card">
6+
<app-avatar mat-card-avatar></app-avatar>
7+
<mat-card-header>
8+
<mat-card-title>{{ username$ | ngrxPush }}</mat-card-title>
9+
<div class="vertical-space-8"></div>
10+
<mat-card-subtitle>{{ email$ | ngrxPush }} </mat-card-subtitle>
11+
</mat-card-header>
12+
</mat-card>
13+
<app-uploading-bar></app-uploading-bar>
1314

14-
<div [ngSwitch]="categories">
15-
<ion-segment mode="md" [(ngModel)]="categories">
16-
<ion-segment-button value="captured">
17-
<ion-label>{{ 'home.profileTab.captured' | transloco }}</ion-label>
18-
</ion-segment-button>
19-
<ion-segment-button value="collected">
20-
<ion-label>{{ 'home.profileTab.collected' | transloco }}</ion-label>
21-
</ion-segment-button>
22-
</ion-segment>
15+
<div [ngSwitch]="categories">
16+
<ion-segment mode="md" [(ngModel)]="categories">
17+
<ion-segment-button value="captured">
18+
<ion-label>{{ 'home.profileTab.captured' | transloco }}</ion-label>
19+
</ion-segment-button>
20+
<ion-segment-button value="collected">
21+
<ion-label>{{ 'home.profileTab.collected' | transloco }}</ion-label>
22+
</ion-segment-button>
23+
</ion-segment>
2324

24-
<p *ngIf="(networkConnected$ | ngrxPush) === false" class="network-status">
25-
{{ 'message.networkNotConnected' | transloco }}
26-
</p>
25+
<p *ngIf="(networkConnected$ | ngrxPush) === false" class="network-status">
26+
{{ 'message.networkNotConnected' | transloco }}
27+
</p>
2728

28-
<div *ngSwitchCase="'captured'">
29-
<div class="capture-container" *transloco="let t">
29+
<div *ngSwitchCase="'captured'">
30+
<div class="capture-container" *transloco="let t">
31+
<mat-grid-list cols="2" gutterSize="16px">
32+
<mat-grid-tile
33+
*ngFor="
34+
let proof of capturedTabItems$ | ngrxPush;
35+
first as isFirstProof;
36+
trackBy: trackCaptureItem
37+
"
38+
class="capture-item"
39+
[joyrideStep]="isFirstProof ? 'highlightFirstCapture' : 'notFirst'"
40+
[title]="t('userGuide.capturedItem')"
41+
[text]="t('userGuide.openToSeeDetailsAndMoreActionItems')"
42+
>
43+
<app-capture-item [proof]="proof"></app-capture-item>
44+
</mat-grid-tile>
45+
</mat-grid-list>
46+
</div>
47+
</div>
48+
49+
<div class="post-captures" *ngSwitchCase="'collected'">
3050
<mat-grid-list cols="2" gutterSize="16px">
3151
<mat-grid-tile
52+
class="capture-item"
3253
*ngFor="
33-
let proof of captures$ | ngrxPush;
34-
first as isFirstProof;
35-
trackBy: trackCaptureItem
54+
let postCapture of collectedTabItems$ | ngrxPush;
55+
trackBy: trackPostCapture
3656
"
37-
class="capture-item"
38-
[joyrideStep]="isFirstProof ? 'highlightFirstCapture' : 'notFirst'"
39-
[title]="t('userGuide.capturedItem')"
40-
[text]="t('userGuide.openToSeeDetailsAndMoreActionItems')"
57+
[routerLink]="[
58+
'details',
59+
{ type: 'post-capture', id: postCapture.id }
60+
]"
4161
>
42-
<app-capture-item [proof]="proof"></app-capture-item>
62+
<ng-container *ngIf="postCapture.asset_file_mime_type as mimeType">
63+
<ion-icon
64+
*ngIf="mimeType | startsWith: 'video'"
65+
name="videocam"
66+
class="is-video"
67+
></ion-icon>
68+
</ng-container>
69+
<ion-icon
70+
*ngIf="postCapture.source_type === 'store'"
71+
name="storefront"
72+
class="is-from-store"
73+
></ion-icon>
74+
<ion-img [src]="postCapture.asset_file_thumbnail"></ion-img>
4375
</mat-grid-tile>
4476
</mat-grid-list>
4577
</div>
4678
</div>
4779

48-
<div class="post-captures" *ngSwitchCase="'collected'">
49-
<mat-grid-list cols="2" gutterSize="16px">
50-
<mat-grid-tile
51-
class="capture-item"
52-
*ngFor="
53-
let postCapture of postCaptures$ | ngrxPush;
54-
trackBy: trackPostCapture
55-
"
56-
[routerLink]="['details', { type: 'post-capture', id: postCapture.id }]"
57-
>
58-
<ng-container *ngIf="postCapture.asset_file_mime_type as mimeType">
59-
<ion-icon
60-
*ngIf="mimeType | startsWith: 'video'"
61-
name="videocam"
62-
class="is-video"
63-
></ion-icon>
64-
</ng-container>
65-
<ion-icon
66-
*ngIf="postCapture.source_type === 'store'"
67-
name="storefront"
68-
class="is-from-store"
69-
></ion-icon>
70-
<ion-img [src]="postCapture.asset_file_thumbnail"></ion-img>
71-
</mat-grid-tile>
72-
</mat-grid-list>
73-
</div>
74-
</div>
80+
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadMoreItems($event)">
81+
<ion-infinite-scroll-content loading-spinner="bubbles">
82+
</ion-infinite-scroll-content>
83+
</ion-infinite-scroll>
84+
</ion-content>

‎src/app/features/home/capture-tab/capture-tab.component.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
:host {
2-
display: block;
32
margin-bottom: 128px;
43
}
54

‎src/app/features/home/capture-tab/capture-tab.component.ts

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { AlertController } from '@ionic/angular';
44
import { TranslocoService } from '@ngneat/transloco';
55
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
66
import { groupBy } from 'lodash-es';
7-
import { iif } from 'rxjs';
7+
import { BehaviorSubject, combineLatest, iif } from 'rxjs';
88
import { catchError, finalize, map, pluck, switchMap } from 'rxjs/operators';
99
import { BlockingActionService } from '../../../shared/blocking-action/blocking-action.service';
1010
import {
@@ -59,6 +59,30 @@ export class CaptureTabComponent {
5959
catchError((err: unknown) => this.errorService.toastError$(err))
6060
);
6161

62+
private readonly itemsPerPage = 10;
63+
64+
readonly capturedTabPage$ = new BehaviorSubject<number>(0);
65+
66+
readonly collectedTabPage$ = new BehaviorSubject<number>(0);
67+
68+
readonly collectedTabItems$ = combineLatest([
69+
this.postCaptures$,
70+
this.collectedTabPage$,
71+
]).pipe(
72+
map(([items, page]) =>
73+
items.slice(0, page * this.itemsPerPage + this.itemsPerPage)
74+
)
75+
);
76+
77+
readonly capturedTabItems$ = combineLatest([
78+
this.captures$,
79+
this.capturedTabPage$,
80+
]).pipe(
81+
map(([items, page]) =>
82+
items.slice(0, page * this.itemsPerPage + this.itemsPerPage)
83+
)
84+
);
85+
6286
constructor(
6387
private readonly proofRepository: ProofRepository,
6488
private readonly diaBackendAuthService: DiaBackendAuthService,
@@ -71,6 +95,20 @@ export class CaptureTabComponent {
7195
private readonly blockingActionService: BlockingActionService
7296
) {}
7397

98+
loadMoreItems(event: any) {
99+
switch (this.categories) {
100+
case 'captured':
101+
this.capturedTabPage$.next(this.capturedTabPage$.value + 1);
102+
break;
103+
case 'collected':
104+
this.collectedTabPage$.next(this.collectedTabPage$.value + 1);
105+
break;
106+
}
107+
108+
const eventTarget = event.target as HTMLIonInfiniteScrollElement;
109+
eventTarget.complete();
110+
}
111+
74112
async editUsername() {
75113
const alert = await this.alertController.create({
76114
header: this.translocoService.translate('editUsername'),
@@ -131,7 +169,13 @@ export class CaptureTabComponent {
131169
refreshCaptures(event: Event) {
132170
this.diaBackendAssetRefreshingService
133171
.refresh()
134-
.pipe(finalize(() => (<CustomEvent>event).detail.complete()))
172+
.pipe(
173+
finalize(() => {
174+
this.capturedTabPage$.next(0);
175+
this.collectedTabPage$.next(0);
176+
return (<CustomEvent>event).detail.complete();
177+
})
178+
)
135179
.subscribe();
136180
}
137181
}

0 commit comments

Comments
 (0)