From ed7bd88e1a48aeeb4d0a2c9256b5a1703bce6be0 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Tue, 14 May 2024 13:54:34 +0200
Subject: [PATCH] MOBILE-4470 core: Fix double infinite-loading on scroll

---
 .../core-infinite-loading.html                | 19 ++++++++++---------
 .../infinite-loading/infinite-loading.ts      |  9 ++++++++-
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/core/components/infinite-loading/core-infinite-loading.html b/src/core/components/infinite-loading/core-infinite-loading.html
index 8f92c736f..0fd30d420 100644
--- a/src/core/components/infinite-loading/core-infinite-loading.html
+++ b/src/core/components/infinite-loading/core-infinite-loading.html
@@ -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>
diff --git a/src/core/components/infinite-loading/infinite-loading.ts b/src/core/components/infinite-loading/infinite-loading.ts
index 80cdd626f..0b519da2d 100644
--- a/src/core/components/infinite-loading/infinite-loading.ts
+++ b/src/core/components/infinite-loading/infinite-loading.ts
@@ -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.