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'"> <ng-container *ngIf="!loadingMore && position !== 'top'">
<div *ngIf="enabled || error" class="ion-padding-horizontal" #bottombutton> <div *ngIf="enabled || error" class="ion-padding-horizontal">
<ion-button *ngIf="!error" expand="block" (click)="loadMore()" fill="outline"> <ion-button *ngIf="!error" expand="block" (click)="loadMore(true)" fill="outline">
{{ 'core.loadmore' | translate }} {{ 'core.loadmore' | translate }}
</ion-button> </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 }} {{ 'core.tryagain' | translate }}
</ion-button> </ion-button>
</div> </div>
</ng-container> </ng-container>
<!-- Don't allow disabling infinite-scroll while loading more items, otherwise infinite scroll stops working. --> <!-- Don't allow disabling infinite-scroll while loading more items on scroll, otherwise infinite scroll stops working. -->
<ion-infinite-scroll [disabled]="!loadingMore && (!enabled || error)" (ionInfinite)="loadMore()" [position]="position"> <ion-infinite-scroll [disabled]="(loadingMore && loadingForced) || (!loadingMore && (!enabled || error))" (ionInfinite)="loadMore()"
[position]="position">
<ion-infinite-scroll-content /> <ion-infinite-scroll-content />
</ion-infinite-scroll> </ion-infinite-scroll>
<ng-container *ngIf="!loadingMore && position === 'top'"> <ng-container *ngIf="!loadingMore && position === 'top'">
<div *ngIf="enabled || error" class="ion-padding-horizontal" #topbutton> <div *ngIf="enabled || error" class="ion-padding-horizontal">
<ion-button *ngIf="!error" expand="block" (click)="loadMore()" fill="outline"> <ion-button *ngIf="!error" expand="block" (click)="loadMore(true)" fill="outline">
{{ 'core.loadmore' | translate }} {{ 'core.loadmore' | translate }}
</ion-button> </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 }} {{ 'core.tryagain' | translate }}
</ion-button> </ion-button>
</div> </div>
</ng-container> </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" /> <ion-spinner [attr.aria-label]="'core.loading' | translate" />
</div> </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; @ViewChild(IonInfiniteScroll) infiniteScroll?: IonInfiniteScroll;
loadingMore = false; // Hide button and avoid loading more. loadingMore = false; // Hide button and avoid loading more.
loadingForced = false; // Whether loading is forced or happened on scroll.
hostElement: HTMLElement; hostElement: HTMLElement;
constructor(element: ElementRef<HTMLElement>) { constructor(element: ElementRef<HTMLElement>) {
@ -96,13 +97,17 @@ export class CoreInfiniteLoadingComponent implements OnChanges {
/** /**
* Load More items calling the action provided. * 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) { if (this.loadingMore) {
return; return;
} }
this.loadingMore = true; this.loadingMore = true;
this.loadingForced = forced;
this.action.emit(() => this.complete()); this.action.emit(() => this.complete());
} }
@ -121,6 +126,8 @@ export class CoreInfiniteLoadingComponent implements OnChanges {
*/ */
protected async completeLoadMore(): Promise<void> { protected async completeLoadMore(): Promise<void> {
this.loadingMore = false; this.loadingMore = false;
this.loadingForced = false;
await this.infiniteScroll?.complete(); await this.infiniteScroll?.complete();
// More items loaded. If the list doesn't fill the full height, infinite scroll isn't triggered automatically. // More items loaded. If the list doesn't fill the full height, infinite scroll isn't triggered automatically.