CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3833 course: Display loading in course index

Browse Source 
This improves performance in old deviced or big courses
This commit is contained in:
Dani Palou 2022-04-08 10:23:18 +02:00
parent 8c41be3520
commit d4695dd845
2 changed files with 75 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/core/features/course/components/course-index/course-index.html
View File

@ -11,10 +11,12 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<ion-list id="core-course-section-selector" role="listbox" aria-labelledby="core-course-section-selector-label"> <core-loading [hideUntil]="loaded">
<ion-list *ngIf="loaded" id="core-course-section-selector" role="listbox" aria-labelledby="core-course-section-selector-label">
<ng-container *ngFor="let section of sectionsToRender"> <ng-container *ngFor="let section of sectionsToRender">
<ion-item *ngIf="allSectionId == section.id" class="divider core-course-index-all" <ion-item *ngIf="allSectionId == section.id" class="divider core-course-index-all"
(click)="selectSectionOrModule($event, section.id)" button [class.item-current]="selectedId === section.id" detail="false"> (click)="selectSectionOrModule($event, section.id)" button [class.item-current]="selectedId === section.id"
detail="false">
<ion-label> <ion-label>
<h2> <h2>
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id"> <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id">
@ -51,12 +53,14 @@
<div id="core-course-index-section-{{section.id}}"> <div id="core-course-index-section-{{section.id}}">
<ng-container *ngIf="section.expanded"> <ng-container *ngIf="section.expanded">
<ng-container *ngFor="let module of section.modules"> <ng-container *ngFor="let module of section.modules">
<ion-item class="module" [class.item-dimmed]="!module.visible" [class.item-hightlighted]="section.highlighted" <ion-item class="module" [class.item-dimmed]="!module.visible"
[class.item-hightlighted]="section.highlighted"
(click)="selectSectionOrModule($event, section.id, module.id)" button> (click)="selectSectionOrModule($event, section.id, module.id)" button>
<ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined" <ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined"
slot="start" aria-hidden="true"></ion-icon> slot="start" aria-hidden="true"></ion-icon>
<ion-icon class="completioninfo completion_incomplete" name="far-circle" <ion-icon class="completioninfo completion_incomplete" name="far-circle"
*ngIf="module.completionStatus === 0" slot="start" [attr.aria-label]="'core.course.todo' | translate"> *ngIf="module.completionStatus === 0" slot="start"
[attr.aria-label]="'core.course.todo' | translate">
</ion-icon> </ion-icon>
<ion-icon class="completioninfo completion_complete" name="fas-circle" <ion-icon class="completioninfo completion_complete" name="fas-circle"
*ngIf="module.completionStatus === 1 || module.completionStatus === 2" color="success" slot="start" *ngIf="module.completionStatus === 1 || module.completionStatus === 2" color="success" slot="start"
@ -81,4 +85,5 @@
</ng-container> </ng-container>
</ng-container> </ng-container>
</ion-list> </ion-list>
</core-loading>
</ion-content> </ion-content>

9
src/core/features/course/components/course-index/course-index.ts
View File

@ -21,6 +21,7 @@ import {
import { CoreCourseHelper, CoreCourseSection } from '@features/course/services/course-helper'; import { CoreCourseHelper, CoreCourseSection } from '@features/course/services/course-helper';
import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate'; import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate';
import { CoreCourseAnyCourseData } from '@features/courses/services/courses'; import { CoreCourseAnyCourseData } from '@features/courses/services/courses';
import { CoreUtils } from '@services/utils/utils';
import { ModalController } from '@singletons'; import { ModalController } from '@singletons';
import { CoreDom } from '@singletons/dom'; import { CoreDom } from '@singletons/dom';
@ -41,6 +42,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
allSectionId = CoreCourseProvider.ALL_SECTIONS_ID; allSectionId = CoreCourseProvider.ALL_SECTIONS_ID;
highlighted?: string; highlighted?: string;
sectionsToRender: CourseIndexSection[] = []; sectionsToRender: CourseIndexSection[] = [];
loaded = false;
constructor( constructor(
protected elementRef: ElementRef, protected elementRef: ElementRef,
@ -109,6 +111,13 @@ export class CoreCourseCourseIndexComponent implements OnInit {
this.highlighted = CoreCourseFormatDelegate.getSectionHightlightedName(this.course); this.highlighted = CoreCourseFormatDelegate.getSectionHightlightedName(this.course);
// Wait a bit to render the data, otherwise the modal takes a while to appear in big courses or slow devices.
await CoreUtils.wait(400);
this.loaded = true;
await CoreUtils.nextTick();
CoreDom.scrollToElement( CoreDom.scrollToElement(
this.elementRef.nativeElement, this.elementRef.nativeElement,
'.item.item-current', '.item.item-current',