Merge pull request #3306 from alfonso-salces/MOBILE-4085

Mobile 4085 - Improve performance in views with OnPush strategy.

src/addons/storagemanager/pages/course-storage/course-storage.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { CoreConstants } from '@/core/constants';
-import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { CoreCourse, CoreCourseProvider } from '@features/course/services/course';
 import {
     CoreCourseHelper,
@@ -41,6 +41,7 @@ import { CoreEventObserver, CoreEvents } from '@singletons/events';
     selector: 'page-addon-storagemanager-course-storage',
     templateUrl: 'course-storage.html',
     styleUrls: ['course-storage.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
 
@@ -71,7 +72,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
     protected isDestroyed = false;
     protected isGuest = false;
 
-    constructor(protected elementRef: ElementRef) {
+    constructor(protected elementRef: ElementRef, protected changeDetectorRef: ChangeDetectorRef) {
         // Refresh the enabled flags if site is updated.
         this.siteUpdatedObserver = CoreEvents.on(CoreEvents.SITE_UPDATED, () => {
             this.downloadCourseEnabled = !CoreCourses.isDownloadCourseDisabledInSite();
@@ -79,6 +80,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
 
             this.initCoursePrefetch();
             this.initModulePrefetch();
+            this.changeDetectorRef.markForCheck();
         }, CoreSites.getCurrentSiteId());
     }
 
@@ -134,6 +136,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
             this.initCoursePrefetch(),
             this.initModulePrefetch(),
         ]);
+        this.changeDetectorRef.markForCheck();
     }
 
     /**
@@ -311,6 +314,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
             }
 
             module.calculatingSize = true;
+            this.changeDetectorRef.markForCheck();
 
             if (!section) {
                 section = this.sections.find((section) => section.modules.some((mod) => mod.id === module.id));
@@ -333,6 +337,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
                 // Ignore errors, it shouldn't happen.
             } finally {
                 module.calculatingSize = false;
+                this.changeDetectorRef.markForCheck();
             }
         }));
 
@@ -340,6 +345,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
         if (section) {
             section.calculatingSize = false;
         }
+        this.changeDetectorRef.markForCheck();
     }
 
     /**
@@ -468,6 +474,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
 
             await this.updateModulesSizes(modules, section);
             CoreCourseHelper.calculateSectionsStatus(this.sections, this.courseId, false, false);
+            this.changeDetectorRef.markForCheck();
         }
     }
 
@@ -503,7 +510,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
      */
     async prefecthSection(section: AddonStorageManagerCourseSection): Promise<void> {
         section.isCalculating = true;
-
+        this.changeDetectorRef.markForCheck();
         try {
             await CoreCourseHelper.confirmDownloadSizeSection(this.courseId, section, this.sections);
 
@@ -516,16 +523,19 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
                 }
             } finally {
                 await this.updateModulesSizes(section.modules, section);
+                this.changeDetectorRef.markForCheck();
             }
         } catch (error) {
             // User cancelled or there was an error calculating the size.
             if (!this.isDestroyed && error) {
                 CoreDomUtils.showErrorModal(error);
+                this.changeDetectorRef.markForCheck();
 
                 return;
             }
         } finally {
             section.isCalculating = false;
+            this.changeDetectorRef.markForCheck();
         }
     }
 
@@ -549,6 +559,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
 
         try {
             // Get download size to ask for confirm if it's high.
+            this.changeDetectorRef.markForCheck();
             const size = await module.prefetchHandler.getDownloadSize(module, module.course, true);
 
             await CoreCourseHelper.prefetchModule(module.prefetchHandler, module, size, module.course, refresh);
@@ -562,6 +573,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
             module.spinner = false;
 
             await this.updateModulesSizes([module]);
+            this.changeDetectorRef.markForCheck();
         }
     }
 
@@ -580,6 +592,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
         module.downloadStatus = status;
 
         module.handlerData?.updateStatus?.(status);
+        this.changeDetectorRef.markForCheck();
     }
 
     /**
@@ -635,6 +648,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
         }
 
         try {
+            this.changeDetectorRef.markForCheck();
             await CoreCourseHelper.confirmAndPrefetchCourse(
                 this.prefetchCourseData,
                 course,
@@ -643,6 +657,7 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
                     isGuest: this.isGuest,
                 },
             );
+            this.changeDetectorRef.markForCheck();
         } catch (error) {
             if (this.isDestroyed) {
                 return;

src/core/features/course/components/course-format/course-format.ts

@@ -23,6 +23,8 @@ import {
     QueryList,
     Type,
     ElementRef,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
 } from '@angular/core';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-component';
@@ -64,6 +66,7 @@ import { CoreUserTourDirectiveOptions } from '@directives/user-tour';
     selector: 'core-course-format',
     templateUrl: 'course-format.html',
     styleUrls: ['course-format.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
 
@@ -120,6 +123,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
     constructor(
         protected content: IonContent,
         protected elementRef: ElementRef,
+        protected changeDetectorRef: ChangeDetectorRef,
     ) {
         // Pass this instance to all components so they can use its methods and properties.
         this.data.coreCourseFormatComponent = this;
@@ -173,6 +177,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
                     }
                 }
             }
+            this.changeDetectorRef.markForCheck();
         });
     }
 
@@ -195,6 +200,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
         if (changes.sections && this.sections) {
             this.treatSections(this.sections);
         }
+        this.changeDetectorRef.markForCheck();
     }
 
     /**
@@ -229,6 +235,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
             this.loadSingleSectionComponent(),
             this.loadAllSectionsComponent(),
         ]);
+        this.changeDetectorRef.markForCheck();
     }
 
     /**
@@ -523,6 +530,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
                 CoreCourse.logView(this.course.id, newSection.section, undefined, this.course.fullname),
             );
         }
+        this.changeDetectorRef.markForCheck();
     }
 
     /**