MOBILE-4653 loading: Add placeholder types for loading

moodlehq · Jan 30, 2025 · 6732e4d · 6732e4d
1 parent 160b90f
commit 6732e4d
Show file tree

Hide file tree

Showing 24 changed files with 116 additions and 34 deletions.
diff --git a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
@@ -3,7 +3,7 @@
         <h2>{{ 'addon.block_activitymodules.pluginname' | translate }}</h2>
     </ion-label>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded">
+<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px" [placeholderLimit]="8">
     <ion-item class="ion-text-wrap" *ngFor="let entry of entries" [detail]="true" button (click)="gotoCoureListModType(entry)">
         <core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false" [colorize]="false"
             [isBranded]="entry.branded" />

diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -18,8 +18,7 @@ <h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
         </div>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded">
-
+<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="120px">
     <ion-row class="ion-hide-md-up addon-block-myoverview-filter" *ngIf="hasCourses">
         <ion-col>
             <!-- Filter courses. -->

diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.scss b/src/addons/block/myoverview/components/myoverview/myoverview.scss
@@ -52,4 +52,8 @@
             @include margin(null, 12px, null, null);
         }
     }
+
+    core-loading {
+        --loading-placeholder-wrap: wrap;
+    }
 }
diff --git a/...cessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/...cessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@@ -6,7 +6,7 @@ <h2>{{ 'addon.block_recentlyaccessedcourses.pluginname' | translate }}</h2>
         <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId" />
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded">
+<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="280px" placeholderHeight="134px" [placeholderLimit]="4">
     <core-empty-box *ngIf="courses.length === 0" image="assets/img/icons/courses.svg"
         [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate" />
     <!-- List of courses. -->

diff --git a/...ntlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/...ntlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@@ -6,7 +6,7 @@ <h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2>
         <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId" />
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded">
+<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="280px" placeholderHeight="66px" [placeholderLimit]="4">
     <div [id]="scrollElementId" [hidden]="!items || items.length === 0" class="core-horizontal-scroll"
         (scroll)="scrollControls.updateScrollPosition()">
         <div *ngIf="items" (onResize)="scrollControls.updateScrollPosition()" class="flex-row">

diff --git a/...s/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss b/...s/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
@@ -17,7 +17,4 @@
     .core-course-module-handler {
         --inner-border-width: 0px;
     }
-    core-loading {
-        --loading-inline-min-height: 102px;
-    }
 }
diff --git a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html b/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
@@ -3,7 +3,7 @@
         <h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
     </ion-label>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded">
+<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px" [placeholderLimit]="8">
     <ion-list *ngIf="mainMenuBlock" class="core-course-module-list-wrapper list-item-limited-width">
         <ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
             <ion-label>

diff --git a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
@@ -6,7 +6,7 @@ <h2>{{ 'addon.block_starredcourses.pluginname' | translate }}</h2>
         <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId" />
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded">
+<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="280px" placeholderHeight="134px" [placeholderLimit]="4">
     <core-empty-box *ngIf="courses.length === 0" image="assets/img/icons/courses.svg"
         [message]="'addon.block_starredcourses.nocourses' | translate" />
     <!-- List of courses. -->

diff --git a/src/addons/block/timeline/components/timeline/addon-block-timeline.html b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
@@ -3,7 +3,7 @@
         <h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
     </ion-label>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded">
+<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="120px" [placeholderLimit]="1">
     <ion-row class="ion-hide-md-up addon-block-timeline-filter" *ngIf="(search$ | async) !== null">
         <ion-col>
             <!-- Filter courses. -->

diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html
@@ -60,7 +60,7 @@ <h1>
     </core-navbar-buttons>
 </ion-header>
 <ion-content (ionScroll)="scrollFunction()">
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="36px">
         <!-- Load previous messages. -->
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError" />
 

diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -25,7 +25,8 @@ <h1>{{ 'addon.messages.messages' | translate }}</h1>
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
 
-        <core-loading [hideUntil]="loaded" [message]="loadingMessage">
+        <core-loading [hideUntil]="loaded" [message]="loadingMessage" placeholderType="grid" placeholderWidth="100%"
+            placeholderHeight="48px">
             <ion-list>
                 <ion-item class="ion-text-wrap" (click)="gotoContacts()" [detail]="true" button>
                     <ion-icon name="fas-address-book" slot="start" aria-hidden="true" />

diff --git a/src/core/components/loading/core-loading.html b/src/core/components/loading/core-loading.html
@@ -1,5 +1,15 @@
-<div class="core-loading-container" *ngIf="!hideUntil" role="status" @coreShowHideAnimation>
+<ng-content *ngIf="loaded" @coreShowHideAnimation />
+@if (!hideUntil) {
+<div class="core-loading-container" role="status" @coreShowHideAnimation [attr.aria-label]="message">
+    @if (!placeholderType) {
     <ion-spinner aria-hidden="true" />
     <p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
+    } @else {
+    <div class="{{placeholderType}} list-item-limited-width placeholder">
+        <div *ngFor="let _ of [].constructor(placeholderLimit)" class="placeholder-element"
+            [ngStyle]="{'width': placeholderWidth, 'height': placeholderHeight}">
+        </div>
+    </div>
+    }
 </div>
-<ng-content *ngIf="loaded" @coreShowHideAnimation />
+}
diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
@@ -2,7 +2,7 @@
 
 @mixin inline() {
     &:not(.core-loading-loaded) {
-        min-height: var(--internal-loading-inline-min-height);
+        min-height: calc(var(--internal-loading-inline-min-height) + 32px);
         width: 100%;
         position: relative;
     }
@@ -13,7 +13,7 @@
         height: auto;
 
         .core-loading-message {
-            @include margin(0, 0, 0, 10px);
+            @include margin(0px, 0px, 0px, 16px);
         }
     }
 }
@@ -29,6 +29,9 @@
     --loading-display: flex;
     --loading-display-message: block;
     --contents-display: block;
+    --loading-placeholder-direction: row;
+    --loading-placeholder-justify: center;
+    --loading-placeholder-wrap: wrap;
 
     @include core-transition(all, 200ms);
     display: var(--contents-display);
@@ -63,14 +66,50 @@
         flex-direction: column;
 
         .core-loading-message {
-            @include margin(10px, 0, 0, 0);
+            @include margin(16px, 0, 0, 0);
             display: var(--loading-display-message);
         }
 
         ion-spinner {
             --color: var(--loading-spinner);
             color: var(--color);
         }
+
+        .placeholder {
+            position: absolute;
+            @include position(0, 0, 0, 0);
+            height: 100%;
+            width: 100%;
+            display: flex;
+            flex-direction: var(--loading-placeholder-direction);
+            padding: 16px;
+            gap: 16px;
+            flex-wrap: var(--loading-placeholder-wrap);
+            justify-content: var(--loading-placeholder-justify);
+            align-items: center;
+            overflow: hidden;
+
+            .placeholder-element {
+                width: 100px;
+                height: 100px;
+                background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
+                background-size: 200% 100%;
+                animation: core-loading 5s infinite ease-in-out;
+                border-radius: 8px;
+                flex-shrink: 0;
+            }
+
+            &.rounded {
+                padding: 4px;
+                gap: 12px;
+
+                .placeholder-element {
+                    width: 48px;
+                    height: 48px;
+                    border-radius: 100%;
+                }
+            }
+        }
     }
 
     &.core-loading-inline {
@@ -84,3 +123,8 @@
     // Implicit Inline.
     @include inline();
 }
+
+@keyframes core-loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
diff --git a/src/core/components/loading/loading.ts b/src/core/components/loading/loading.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnInit, OnChanges, SimpleChange, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, SimpleChange, ElementRef, AfterViewInit, OnDestroy, HostBinding } from '@angular/core';
 
 import { CoreUtils } from '@singletons/utils';
 import { CoreAnimations } from '@components/animations';
@@ -55,6 +55,10 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, A
     @Input({ transform: toBoolean }) hideUntil = false; // Determine when should the contents be shown.
     @Input() message?: string; // Message to show while loading.
     @Input({ transform: toBoolean }) fullscreen = true; // Use the whole screen.
+    @Input() placeholderType?: string;
+    @Input() placeholderWidth?: string;
+    @Input() placeholderHeight?: string;
+    @Input() placeholderLimit = 20;
 
     uniqueId: string;
     loaded = false;
@@ -64,6 +68,26 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, A
     protected onReadyPromise = new CorePromisedValue<void>();
     protected mutationObserver: MutationObserver;
 
+    @HostBinding('class.core-loading-inline')
+    get inlineClass(): boolean {
+        return !this.fullscreen;
+    }
+
+    @HostBinding('attr.aria-busy')
+    get ariaBusy(): string {
+        return this.loaded ? 'false' : 'true';
+    }
+
+    @HostBinding('style.--loading-inline-min-height')
+    get minHeith(): string | undefined {
+        return this.placeholderHeight;
+    }
+
+    @HostBinding('class.core-loading-loaded')
+    get loadedClass(): boolean {
+        return this.loaded;
+    }
+
     constructor(element: ElementRef) {
         this.element = element.nativeElement;
         CoreDirectivesRegistry.register(this.element, this);
@@ -102,7 +126,6 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, A
             // Default loading message.
             this.message = Translate.instant('core.loading');
         }
-        this.element.classList.toggle('core-loading-inline', !this.fullscreen);
     }
 
     /**
@@ -132,12 +155,8 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, A
      * Change loaded state.
      *
      * @param loaded True to load, false otherwise.
-     * @returns Promise resolved when done.
      */
     async changeState(loaded: boolean): Promise<void> {
-        this.element.classList.toggle('core-loading-loaded', loaded);
-        this.element.setAttribute('aria-busy', loaded ?  'false' : 'true');
-
         if (this.loaded === loaded) {
             return;
         }

diff --git a/src/core/features/block/components/block/block.scss b/src/core/features/block/components/block/block.scss
@@ -13,6 +13,8 @@
     }
 
     ::ng-deep core-loading {
-        --loading-inline-min-height: 44px;
+        --loading-inline-min-height: 60px;
+        --loading-placeholder-justify: flex-start;
+        --loading-placeholder-wrap: nowrap;
     }
 }
diff --git a/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html b/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html
@@ -6,7 +6,8 @@ <h2>
         </h2>
     </ion-label>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded" [fullscreen]="false" placeholderType="grid" placeholderWidth="100%" placeholderHeight="120px"
+    [placeholderLimit]="1">
     <ion-item *ngIf="block.contents?.content" class="ion-text-wrap core-block-content">
         <ion-label>
             <core-format-text [text]="block.contents?.content" contextLevel="block" [contextInstanceId]="block.instanceid"

diff --git a/src/core/features/block/components/side-blocks/side-blocks.html b/src/core/features/block/components/side-blocks/side-blocks.html
@@ -11,7 +11,7 @@
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="120px">
         <ion-list *ngIf="blocks.length > 0">
             <ng-container *ngFor="let block of blocks">
                 <core-block *ngIf="block.visible" [block]="block" [contextLevel]="contextLevel" [instanceId]="instanceId" />

diff --git a/src/core/features/course/components/course-format/course-format.html b/src/core/features/course/components/course-format/course-format.html
@@ -5,7 +5,7 @@
 </core-navbar-buttons>
 <core-dynamic-component [component]="courseFormatComponent" [data]="data">
     <!-- Default course format. -->
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
 
         <!-- Single section. -->
         <div *ngIf="selectedSection && selectedSection.id !== allSectionsId" class="list-item-limited-width">

diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html
@@ -11,7 +11,7 @@ <h1 id="core-course-section-selector-label">{{ 'core.course.courseindex' | trans
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
         <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">
                 <ion-item *ngIf="allSectionId === section.id" class="divider core-course-index-all"

diff --git a/src/core/features/course/pages/contents/contents.html b/src/core/features/course/pages/contents/contents.html
@@ -3,7 +3,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <core-loading [hideUntil]="dataLoaded && !updatingData">
+    <core-loading [hideUntil]="dataLoaded && !updatingData" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
         <core-course-format [course]="course" [sections]="sections" [initialSectionId]="sectionId" [initialSectionNumber]="sectionNumber"
             [initialBlockInstanceId]="blockInstanceId" [moduleId]="moduleId" class="core-course-format-{{course.format}}"
             *ngIf="dataLoaded && sections" [isGuest]="isGuest" />

diff --git a/src/core/features/courses/pages/dashboard/dashboard.html b/src/core/features/courses/pages/dashboard/dashboard.html
@@ -8,7 +8,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="96px">
         <ion-list class="list-item-limited-width" *ngIf="hasMainBlocks">
             <ng-container *ngFor="let block of blocks">
                 <core-block *ngIf="block.visible" [block]="block" contextLevel="user" [instanceId]="userId" />

diff --git a/src/core/features/mainmenu/pages/menu/menu.html b/src/core/features/mainmenu/pages/menu/menu.html
@@ -1,8 +1,7 @@
 <ion-tabs #mainTabs [hidden]="!showTabs" [class]="'placement-' + tabsPlacement"
     [class.tabshidden]="!isMainScreen && tabsPlacement === 'bottom'" (ionTabsDidChange)="tabChanged($event)">
     <ion-tab-bar slot="bottom" class="mainmenu-tabs" [@menuVisibilityAnimation]="visibility">
-        <ion-spinner *ngIf="!loaded" [attr.aria-label]="'core.loading' | translate" />
-
+        <core-loading [hideUntil]="loaded" placeholderType="rounded" [placeholderLimit]="8" />
         <core-user-menu-button *ngIf="loaded && tabsPlacement === 'side'" [alwaysShow]="true" />
 
         <ion-tab-button *ngFor="let tab of tabs" (keydown)="tabAction.keyDown(tab.page, $event)" (keyup)="tabAction.keyUp(tab.page, $event)"

diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss
@@ -95,6 +95,7 @@ ion-tab-button {
 }
 
 ion-tabs.placement-bottom {
+
     ion-tab-button {
         border-top: 4px solid transparent;
         border-bottom: 4px solid transparent;
@@ -134,6 +135,11 @@ ion-tabs.placement-bottom {
 ion-tabs.placement-side {
     flex-direction: row;
 
+    core-loading {
+        --loading-placeholder-direction: column;
+        --loading-placeholder-justify: flex-start;
+    }
+
     ion-tab-bar {
         order: -1;
         width: var(--menutabbar-size);

diff --git a/src/core/features/user/pages/participants/participants.html b/src/core/features/user/pages/participants/participants.html
@@ -7,7 +7,7 @@
         <core-search-box [disabled]="searchInProgress" [spellcheck]="false" [lengthCheck]="1" autocorrect="off"
             searchArea="CoreUserParticipants" (onSubmit)="search($event)" (onClear)="clearSearch()" />
 
-        <core-loading [hideUntil]="participants.loaded">
+        <core-loading [hideUntil]="participants.loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
             <core-empty-box *ngIf="participants.empty && !searchInProgress && !searchQuery" icon="far-user"
                 [message]="'core.user.noparticipants' | translate" />