Skip to content

Commit

Permalink
fix(Certificates): ⚡ lazy loading of certificates
Browse files Browse the repository at this point in the history
  • Loading branch information
@juamber-rgs
juamber-rgs committed Nov 20, 2023
1 parent 8a25f0f commit 727ca12
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 82 deletions.
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@
},
"editor.formatOnSave": false
},
"conventionalCommits.scopes": ["Backoffice", "Web", "CV", "GenericTable", "Auth"]
"conventionalCommits.scopes": ["Backoffice", "Web", "CV", "GenericTable", "Auth", "Certificates"]
}
137 changes: 77 additions & 60 deletions src/app/website/pages/certificates/certificates.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,80 @@
<div class="certificates" *appLet="language$ | async as language">
<ng-container *ngIf="!(loadingCertificateGroups$ | async)">
<div class="my-container" *ngFor="let certificateGroup of certificateGroups$ | async">
<div class="container-info">
<div class="title">
<h3>{{ getTranslation(language.acronym, certificateGroup.nameTranslations) }}</h3>
</div>
<swiper [config]="swiperConfig" id="{{ '.swiper' + certificateGroup?.id }}">
<ng-template swiperSlide *ngFor="let certificate of orderByDate(certificateGroup.certificates)">
<div class="card swiper-slide">
<div class="image-content">
<div class="card-image">
<div class="overlay">
<h4>{{ getTranslation(language.acronym, certificate.nameTranslations) }}</h4>
<h5>{{ certificate.date | date }}</h5>
<p>{{ getTranslation(language.acronym, certificate.descriptionTranslations) }}</p>
</div>
<img
[src]="certificate.image"
[alt]="getTranslation(language.acronym, certificate.nameTranslations)"
class="card-img"
/>
</div>
<ng-container *appLet="loadingMoreCertificateGroups$ | async as loadingMoreCertificateGroups">
<ng-container *appLet="loadingCertificateGroups$ | async as loadingCertificateGroups">
<ng-container *appLet="language$ | async as language">
<div class="certificates">
<ng-container *ngIf="!loadingCertificateGroups; else loading">
<div class="my-container" *ngFor="let certificateGroup of certificateGroups$ | async">
<div class="container-info">
<div class="title">
<h3>{{ getTranslation(language.acronym, certificateGroup.nameTranslations) }}</h3>
</div>
<swiper [config]="swiperConfig" id="{{ '.swiper' + certificateGroup?.id }}">
<ng-template swiperSlide *ngFor="let certificate of orderByDate(certificateGroup.certificates)">
<div class="card swiper-slide">
<div class="image-content">
<div class="card-image">
<div class="overlay">
<h4>{{ getTranslation(language.acronym, certificate.nameTranslations) }}</h4>
<h5>{{ certificate.date | date }}</h5>
<p>{{ getTranslation(language.acronym, certificate.descriptionTranslations) }}</p>
</div>
<img
[src]="certificate.image"
[alt]="getTranslation(language.acronym, certificate.nameTranslations)"
class="card-img"
/>
</div>
</div>

<div class="card-content">
<div class="buttons">
<button class="button" *ngIf="certificate.web">
<i (click)="open(certificate.web)" class="fa-solid fa-globe"></i>
</button>
<button class="button" *ngIf="certificate.microsoftStore">
<i (click)="open(certificate.microsoftStore)" class="fa-brands fa-microsoft"></i>
</button>
<button class="button" *ngIf="certificate.playStore">
<i (click)="open(certificate.playStore)" class="fa-brands fa-google-play"></i>
</button>
<button class="button" *ngIf="certificate.github">
<i (click)="open(certificate.github)" class="fa-brands fa-github"></i>
</button>
<button class="button" *ngIf="certificate.url">
<i (click)="open(certificate.url)" class="fa-solid fa-link"></i>
</button>
<button class="button" *ngIf="certificate.pdf">
<i (click)="open(certificate.pdf)" class="fa-solid fa-download"></i>
</button>
</div>
</div>
<div class="card-content">
<div class="buttons">
<button class="button" *ngIf="certificate.web">
<i (click)="open(certificate.web)" class="fa-solid fa-globe"></i>
</button>
<button class="button" *ngIf="certificate.microsoftStore">
<i (click)="open(certificate.microsoftStore)" class="fa-brands fa-microsoft"></i>
</button>
<button class="button" *ngIf="certificate.playStore">
<i (click)="open(certificate.playStore)" class="fa-brands fa-google-play"></i>
</button>
<button class="button" *ngIf="certificate.github">
<i (click)="open(certificate.github)" class="fa-brands fa-github"></i>
</button>
<button class="button" *ngIf="certificate.url">
<i (click)="open(certificate.url)" class="fa-solid fa-link"></i>
</button>
<button class="button" *ngIf="certificate.pdf">
<i (click)="open(certificate.pdf)" class="fa-solid fa-download"></i>
</button>
</div>
</div>
</div>
</ng-template>
</swiper>
</div>
</ng-template>
</swiper>
</div></div
></ng-container>
<ng-container *ngIf="loadingCertificateGroups$ | async">
<div class="my-container" *ngFor="let certificateGroup of [0, 0]">
<div class="container-info">
<swiper [config]="swiperConfig">
<ng-template swiperSlide *ngFor="let certificate of [0, 0, 0]">
<p-skeleton width="100%" height="20em"></p-skeleton>
</ng-template>
</swiper>
</div></div
></ng-container>
</div>
</div>
</ng-container>
<ng-template #loading>
<div class="my-container" *ngFor="let certificateGroup of [0, 0]">
<div class="container-info">
<swiper [config]="swiperConfig">
<ng-template swiperSlide *ngFor="let certificate of [0, 0, 0]">
<p-skeleton width="100%" height="20em"></p-skeleton>
</ng-template>
</swiper>
</div></div
></ng-template>
<ng-container *ngIf="loadingMoreCertificateGroups">
<div class="my-container" *ngFor="let certificateGroup of [0]">
<div class="container-info">
<swiper [config]="swiperConfig">
<ng-template swiperSlide *ngFor="let certificate of [0, 0, 0]">
<p-skeleton width="100%" height="20em"></p-skeleton>
</ng-template>
</swiper>
</div></div
></ng-container>
</div>
</ng-container>
</ng-container>
</ng-container>
44 changes: 23 additions & 21 deletions src/app/website/pages/certificates/certificates.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable, combineLatest, scan } from 'rxjs';
import { Observable, combineLatest, pairwise, scan, startWith, take } from 'rxjs';
import { CertificateGroup } from 'src/app/backoffice/tables/certificate-group/models/certificate-group.model';
import { certificateGroupActions } from 'src/app/backoffice/tables/certificate-group/state/certificate-group.actions';
import { certificateGroupReducer } from 'src/app/backoffice/tables/certificate-group/state/certificate-group.reducer';
Expand Down Expand Up @@ -32,7 +32,8 @@ export class CertificatesComponent implements OnInit {
loadingCertificateTypes$: Observable<boolean> = this.store.select(certificateTypeReducer.getLoading);

certificateGroups$: Observable<CertificateGroup[]> = this.store.select(certificateGroupReducer.getAll);
loadingCertificateGroups$: Observable<boolean> = this.store.select(certificateGroupReducer.getLoading);
loadingMoreCertificateGroups$: Observable<boolean> = this.store.select(certificateGroupReducer.getLoading);
loadingCertificateGroups$: Observable<boolean> = this.store.select(certificateGroupReducer.getLoading).pipe(take(2));

tabIndexes: { groupId: any; value: number }[] = [];

Expand Down Expand Up @@ -62,27 +63,28 @@ export class CertificatesComponent implements OnInit {
};

ngOnInit(): void {
combineLatest([this.certificateGroups$, this.certificateGroups$.pipe(scan((count) => count + 1, 0))]).subscribe(
([certificateGroups, count]) => {
if (certificateGroups.length === 0 || count < 10) {
this.store.dispatch(
certificateGroupActions.loadAll({
payload: {
first: count - 1,
rows: 1,
},
}),
);
}
combineLatest([
this.certificateGroups$.pipe(startWith([]), pairwise()),
this.certificateGroups$.pipe(scan((count) => count + 1, 0)),
]).subscribe(([[previousCertificateGroups, currentCertificateGroups], count]) => {
if (currentCertificateGroups.length === 0 || previousCertificateGroups.length < currentCertificateGroups.length) {
this.store.dispatch(
certificateGroupActions.loadMore({
payload: {
first: count - 1,
rows: 1,
},
}),
);
}

certificateGroups.forEach((certificateGroup) => {
this.tabIndexes.push({
groupId: certificateGroup.id,
value: 0,
});
currentCertificateGroups.forEach((certificateGroup) => {
this.tabIndexes.push({
groupId: certificateGroup.id,
value: 0,
});
},
);
});
});
}

orderByDate(certificates: Certificate[]): Certificate[] {
Expand Down

0 comments on commit 727ca12

Please sign in to comment.