EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4470 core: Fix double infinite-loading on scroll

main
Noel De Martin 2024-05-14 13:54:34 +02:00
parent 888dd8bc0b
commit ed7bd88e1a
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/core/components/infinite-loading/core-infinite-loading.html
View File

@ -1,30 +1,31 @@
<ng-container *ngIf="!loadingMore && position !== 'top'">
<div *ngIf="enabled || error" class="ion-padding-horizontal" #bottombutton>
<ion-button *ngIf="!error" expand="block" (click)="loadMore()" fill="outline">
<div *ngIf="enabled || error" class="ion-padding-horizontal">
<ion-button *ngIf="!error" expand="block" (click)="loadMore(true)" fill="outline">
{{ 'core.loadmore' | translate }}
</ion-button>
<ion-button *ngIf="error" expand="block" (click)="loadMore()" fill="outline">
<ion-button *ngIf="error" expand="block" (click)="loadMore(true)" fill="outline">
{{ 'core.tryagain' | translate }}
</ion-button>
</div>
</ng-container>
<!-- Don't allow disabling infinite-scroll while loading more items, otherwise infinite scroll stops working. -->
<ion-infinite-scroll [disabled]="!loadingMore && (!enabled || error)" (ionInfinite)="loadMore()" [position]="position">
<!-- Don't allow disabling infinite-scroll while loading more items on scroll, otherwise infinite scroll stops working. -->
<ion-infinite-scroll [disabled]="(loadingMore && loadingForced) || (!loadingMore && (!enabled || error))" (ionInfinite)="loadMore()"
[position]="position">
<ion-infinite-scroll-content />
</ion-infinite-scroll>
<ng-container *ngIf="!loadingMore && position === 'top'">
<div *ngIf="enabled || error" class="ion-padding-horizontal" #topbutton>
<ion-button *ngIf="!error" expand="block" (click)="loadMore()" fill="outline">
<div *ngIf="enabled || error" class="ion-padding-horizontal">
<ion-button *ngIf="!error" expand="block" (click)="loadMore(true)" fill="outline">
{{ 'core.loadmore' | translate }}
</ion-button>
<ion-button *ngIf="error" expand="block" (click)="loadMore()" fill="outline">
<ion-button *ngIf="error" expand="block" (click)="loadMore(true)" fill="outline">
{{ 'core.tryagain' | translate }}
</ion-button>
</div>
</ng-container>
<div *ngIf="loadingMore" class="ion-padding ion-text-center" #spinnercontainer>
<div *ngIf="loadingMore && loadingForced" class="ion-padding ion-text-center">
<ion-spinner [attr.aria-label]="'core.loading' | translate" />
</div>

9
src/core/components/infinite-loading/infinite-loading.ts
View File

@ -38,6 +38,7 @@ export class CoreInfiniteLoadingComponent implements OnChanges {
@ViewChild(IonInfiniteScroll) infiniteScroll?: IonInfiniteScroll;
loadingMore = false; // Hide button and avoid loading more.
loadingForced = false; // Whether loading is forced or happened on scroll.
hostElement: HTMLElement;
constructor(element: ElementRef<HTMLElement>) {
@ -96,13 +97,17 @@ export class CoreInfiniteLoadingComponent implements OnChanges {
/**
* Load More items calling the action provided.
*
* @param forced Whether loading happened on scroll or was forced.
*/
loadMore(): void {
loadMore(forced: boolean = false): void {
if (this.loadingMore) {
return;
}
this.loadingMore = true;
this.loadingForced = forced;
this.action.emit(() => this.complete());
}
@ -121,6 +126,8 @@ export class CoreInfiniteLoadingComponent implements OnChanges {
*/
protected async completeLoadMore(): Promise<void> {
this.loadingMore = false;
this.loadingForced = false;
await this.infiniteScroll?.complete();
// More items loaded. If the list doesn't fill the full height, infinite scroll isn't triggered automatically.