MOBILE-4362 activity: Infinite loading on list mod type page

src/core/components/infinite-loading/infinite-loading.ts

@@ -22,7 +22,7 @@ const THRESHOLD = .15; // % of the scroll element height that must be close to t
  * Component to show a infinite loading trigger and spinner while more data is being loaded.
  *
  * Usage:
- * <core-infinite-loading [action]="loadingAction" [enabled]="dataLoaded"></core-inifinite-loading>
+ * <core-infinite-loading [action]="loadingAction" [enabled]="dataLoaded"></core-infinite-loading>
  */
 @Component({
     selector: 'core-infinite-loading',

src/core/features/course/pages/contents/contents.ts

@@ -298,7 +298,7 @@ export class CoreCourseContentsPage implements OnInit, OnDestroy, CoreRefreshCon
             await this.loadData(true, true);
         } finally {
             // Do not call doRefresh on the format component if the refresher is defined in the format component
-            // to prevent an inifinite loop.
+            // to prevent an infinite loop.
             if (this.displayRefresher && this.formatComponent) {
                 await CoreUtils.ignoreErrors(this.formatComponent.doRefresh(refresher));
             }

src/core/features/course/pages/list-mod-type/list-mod-type.html

@@ -17,7 +17,8 @@
         </core-empty-box>
 
         <ion-list class="core-course-module-list-wrapper">
-            <ng-container *ngFor="let section of sections">
+            <ng-container *ngFor="let section of sections; index as i">
+                <ng-container *ngIf="i <= lastShownSectionIndex">
                     <ion-item-divider class="course-section ion-text-wrap" *ngIf="section.name">
                         <ion-label>
                             <h2>
@@ -32,6 +33,8 @@
                         </core-course-module>
                     </ng-container>
                 </ng-container>
+            </ng-container>
         </ion-list>
+        <core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
     </core-loading>
 </ion-content>

src/core/features/course/pages/list-mod-type/list-mod-type.ts

@@ -34,10 +34,14 @@ import { CoreAnalytics, CoreAnalyticsEventType } from '@services/analytics';
 })
 export class CoreCourseListModTypePage implements OnInit {
 
+    private static readonly PAGE_LENGTH = 10; // How many activities should load each time showMoreActivities is called.
+
     sections: CoreCourseSection[] = [];
     title = '';
     loaded = false;
     courseId = 0;
+    canLoadMore = false;
+    lastShownSectionIndex = -1;
 
     protected modName?: string;
     protected archetypes: Record<string, number> = {}; // To speed up the check of modules.
@@ -84,8 +88,6 @@ export class CoreCourseListModTypePage implements OnInit {
 
     /**
      * Fetches the data.
-     *
-     * @returns Resolved when done.
      */
     protected async fetchData(): Promise<void> {
         if (!this.courseId) {
@@ -97,7 +99,7 @@ export class CoreCourseListModTypePage implements OnInit {
             let sections = await CoreCourse.getSections(this.courseId, false, true);
 
             sections = sections.filter((section) => {
-                if (!section.modules) {
+                if (!section.modules.length || section.hiddenbynumsections) {
                     return false;
                 }
 
@@ -134,16 +136,36 @@ export class CoreCourseListModTypePage implements OnInit {
             const result = await CoreCourseHelper.addHandlerDataForModules(sections, this.courseId);
 
             this.sections = result.sections;
+
+            this.lastShownSectionIndex = -1;
+            this.showMoreActivities();
         } catch (error) {
             CoreDomUtils.showErrorModalDefault(error, 'Error getting data');
         }
     }
 
+    /**
+     * Show more activities.
+     *
+     * @param infiniteComplete Infinite scroll complete function. Only used from core-infinite-loading.
+     */
+    showMoreActivities(infiniteComplete?: () => void): void {
+        let modulesLoaded = 0;
+        while (this.lastShownSectionIndex < this.sections.length - 1 && modulesLoaded < CoreCourseListModTypePage.PAGE_LENGTH) {
+            this.lastShownSectionIndex++;
+
+            modulesLoaded += this.sections[this.lastShownSectionIndex].modules.length;
+        }
+
+        this.canLoadMore = this.lastShownSectionIndex < this.sections.length - 1;
+
+        infiniteComplete?.();
+    }
+
     /**
      * Refresh the data.
      *
      * @param refresher Refresher.
-     * @returns Promise resolved when done.
      */
     async refreshData(refresher: IonRefresher): Promise<void> {
         await CoreUtils.ignoreErrors(CoreCourse.invalidateSections(this.courseId));