From 443e391cfa3cf2c580f44f99aacb0a68f73095d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 30 Jan 2025 13:24:57 +0100
Subject: [PATCH] MOBILE-4653 loading: Add placeholder types for loading

---
 .../addon-block-activitymodules.html          |  2 +-
 .../myoverview/addon-block-myoverview.html    |  3 +-
 .../components/myoverview/myoverview.scss     |  4 ++
 .../addon-block-recentlyaccessedcourses.html  |  2 +-
 .../addon-block-recentlyaccesseditems.html    |  2 +-
 .../recentlyaccesseditems.scss                |  3 --
 .../addon-block-sitemainmenu.html             |  2 +-
 .../addon-block-starredcourses.html           |  2 +-
 .../timeline/addon-block-timeline.html        |  2 +-
 .../messages/pages/discussion/discussion.html |  2 +-
 .../group-conversations.html                  |  3 +-
 src/addons/notifications/pages/list/list.html |  2 +-
 .../pages/settings/settings.html              |  2 +-
 .../courses-storage/courses-storage.html      |  2 +-
 src/core/components/loading/core-loading.html | 14 +++++-
 src/core/components/loading/loading.scss      | 50 +++++++++++++++++--
 src/core/components/loading/loading.ts        | 31 +++++++++---
 .../block/components/block/block.scss         |  4 +-
 .../core-block-pre-rendered.html              |  3 +-
 .../components/side-blocks/side-blocks.html   |  2 +-
 .../course-format/course-format.html          |  2 +-
 .../components/course-index/course-index.html |  2 +-
 .../course/pages/contents/contents.html       |  2 +-
 .../courses/pages/categories/categories.html  |  2 +-
 .../courses/pages/dashboard/dashboard.html    |  2 +-
 .../features/courses/pages/list/list.html     |  2 +-
 .../features/grades/pages/course/course.html  |  2 +-
 .../grades/pages/courses/courses.html         |  2 +-
 .../components/user-menu/user-menu.html       |  2 +-
 .../features/mainmenu/pages/menu/menu.html    |  3 +-
 .../features/mainmenu/pages/menu/menu.scss    |  6 +++
 .../features/settings/pages/site/site.html    |  2 +-
 .../user/pages/participants/participants.html |  2 +-
 .../features/user/pages/profile/profile.html  |  2 +-
 34 files changed, 126 insertions(+), 44 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
index 0415cb026c3..ab4b61d8b7e 100644
--- 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
index 5d0a88dccb3..1a4ff76ba7a 100644
--- 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
index abfe545be56..cb03a6b3cbd 100644
--- 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/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
index 384b2b797c5..4a9f0d60d76 100644
--- a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/src/addons/block/recentlyaccessedcourses/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/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
index d3a5a62124b..ca4d80bfd39 100644
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
+++ b/src/addons/block/recentlyaccesseditems/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/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
index 1d64d9e8cf5..64a523ce2e9 100644
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
+++ b/src/addons/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
index 56c6d540d1f..4a00c4a62d5 100644
--- 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
index be62d2b75db..93adf0aa95a 100644
--- 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
index 0b7d03d0d9e..572ba8679d7 100644
--- 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
index 6425cc125a3..8cd9cbae3d0 100644
--- 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
index 13fd5c313eb..04ebc33c417 100644
--- 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/addons/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html
index ec1beac1a9b..e2b225288be 100644
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@@ -16,7 +16,7 @@ <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
         <ion-refresher slot="fixed" [disabled]="!notifications.loaded" (ionRefresh)="refreshNotifications($event.target)">
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
-        <core-loading [hideUntil]="notifications.loaded">
+        <core-loading [hideUntil]="notifications.loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
             <ion-card class="core-warning-card core-card-with-buttons" *ngIf="!hasNotificationsPermission && !permissionWarningHidden">
                 <ion-item class="ion-text-wrap">
                     <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
diff --git a/src/addons/notifications/pages/settings/settings.html b/src/addons/notifications/pages/settings/settings.html
index c3ec1194e46..380b7a957c3 100644
--- a/src/addons/notifications/pages/settings/settings.html
+++ b/src/addons/notifications/pages/settings/settings.html
@@ -19,7 +19,7 @@ <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
     <ion-refresher slot="fixed" [disabled]="!preferencesLoaded" (ionRefresh)="refreshPreferences($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
-    <core-loading [hideUntil]="preferencesLoaded">
+    <core-loading [hideUntil]="preferencesLoaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
         @if (warningMessage()) {
         <ion-card class="core-warning-card ion-margin-top">
             <ion-item>
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.html b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
index 724d4cb7534..fe9cc38a98b 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@@ -9,7 +9,7 @@ <h1>{{ 'addon.storagemanager.managedownloads' | translate }}</h1>
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="84px">
         <div class="ion-padding-horizontal ion-text-wrap" *ngIf="spaceUsage">
             <h2>{{ 'addon.storagemanager.alldata' | translate }}</h2>
         </div>
diff --git a/src/core/components/loading/core-loading.html b/src/core/components/loading/core-loading.html
index 7ba101bbd3e..a1c47a90929 100644
--- 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
index e9db2d2a814..1c12635bb6c 100644
--- 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,7 +66,7 @@
         flex-direction: column;
 
         .core-loading-message {
-            @include margin(10px, 0, 0, 0);
+            @include margin(16px, 0, 0, 0);
             display: var(--loading-display-message);
         }
 
@@ -71,6 +74,42 @@
             --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: var(--mdl-shape-borderRadius-lg);
+                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
index fc38bea48f0..199c27513c5 100644
--- 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
index f76efbb4508..e8ad3540083 100644
--- 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
index 23488226d24..d43bdd38d39 100644
--- 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
index 418da89f857..a89865798ef 100644
--- 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
index ecc0b6bb66a..89506868904 100644
--- 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
index a9ef8818b2f..7bfecd6027f 100644
--- 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
index b5dd06beb25..8af4e312547 100644
--- 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/categories/categories.html b/src/core/features/courses/pages/categories/categories.html
index 2cb43e48a88..100731382a0 100644
--- a/src/core/features/courses/pages/categories/categories.html
+++ b/src/core/features/courses/pages/categories/categories.html
@@ -23,7 +23,7 @@ <h1>
     <ion-refresher slot="fixed" [disabled]="!categoriesLoaded" (ionRefresh)="refreshCategories($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
-    <core-loading [hideUntil]="categoriesLoaded">
+    <core-loading [hideUntil]="categoriesLoaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="108px">
         <ion-list class="list-item-limited-width">
             <ion-item *ngIf="currentCategory" class="ion-text-wrap">
                 <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate" />
diff --git a/src/core/features/courses/pages/dashboard/dashboard.html b/src/core/features/courses/pages/dashboard/dashboard.html
index 296ac37e0c9..a82d94b3480 100644
--- 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/courses/pages/list/list.html b/src/core/features/courses/pages/list/list.html
index 1e6f429fd37..6e6d0d2697a 100644
--- a/src/core/features/courses/pages/list/list.html
+++ b/src/core/features/courses/pages/list/list.html
@@ -28,7 +28,7 @@ <h1 *ngIf="showOnlyEnrolled">{{ 'core.courses.mycourses' | translate }}</h1>
         [placeholder]="'core.courses.search' | translate" [searchLabel]="'core.courses.search' | translate" [autoFocus]="searchMode"
         searchArea="CoreCoursesSearch" [lengthCheck]="1" />
 
-    <core-loading [hideUntil]="loaded" [message]="loadingMessage">
+    <core-loading [hideUntil]="loaded" [message]="loadingMessage" placeholderType="grid" placeholderWidth="100%" placeholderHeight="108px">
         <ng-container *ngIf="searchMode && searchTotal > 0">
             <ion-item-divider>
                 <ion-label>
diff --git a/src/core/features/grades/pages/course/course.html b/src/core/features/grades/pages/course/course.html
index 93cb0270df8..96b4558ac3b 100644
--- a/src/core/features/grades/pages/course/course.html
+++ b/src/core/features/grades/pages/course/course.html
@@ -12,7 +12,7 @@ <h1>{{ title }}</h1>
     <ion-refresher slot="fixed" [disabled]="!columns || !rows" (ionRefresh)="refreshGrades($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="36px">
         <core-empty-box *ngIf="!rows.length" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate" />
         <div *ngIf="rows.length" class="core-grades-container">
             <table class="core-table core-grades-table" [class.summary]="showSummary">
diff --git a/src/core/features/grades/pages/courses/courses.html b/src/core/features/grades/pages/courses/courses.html
index 1c7eb2f8d76..e76b6b182dd 100644
--- a/src/core/features/grades/pages/courses/courses.html
+++ b/src/core/features/grades/pages/courses/courses.html
@@ -13,7 +13,7 @@ <h1>{{ 'core.grades.grades' | translate }}</h1>
         <ion-refresher slot="fixed" [disabled]="!courses.loaded" (ionRefresh)="refreshCourses($event.target)">
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
-        <core-loading [hideUntil]="courses.loaded">
+        <core-loading [hideUntil]="courses.loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
             <core-empty-box *ngIf="courses.empty" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate" />
 
             <ion-list *ngIf="!courses.empty">
diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.html b/src/core/features/mainmenu/components/user-menu/user-menu.html
index 0dd36cd49f2..76ca73e3f8e 100644
--- a/src/core/features/mainmenu/components/user-menu/user-menu.html
+++ b/src/core/features/mainmenu/components/user-menu/user-menu.html
@@ -13,7 +13,7 @@ <h1>
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="handlersLoaded">
+    <core-loading [hideUntil]="handlersLoaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
         <ion-list>
             <!-- Site info with URL and clickable. -->
             <ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo && displaySiteUrl" lines="full" [detail]="false"
diff --git a/src/core/features/mainmenu/pages/menu/menu.html b/src/core/features/mainmenu/pages/menu/menu.html
index fd46cbcf262..fdc5224bc69 100644
--- 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
index 786fd93a1ed..e777000201a 100644
--- 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/settings/pages/site/site.html b/src/core/features/settings/pages/site/site.html
index e075696afe7..0f22918b048 100644
--- a/src/core/features/settings/pages/site/site.html
+++ b/src/core/features/settings/pages/site/site.html
@@ -14,7 +14,7 @@ <h1>{{ 'core.settings.preferences' | translate}}</h1>
         <ion-refresher slot="fixed" [disabled]="!handlers.loaded" (ionRefresh)="refreshData($event.target)">
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
-        <core-loading [hideUntil]="handlers.loaded">
+        <core-loading [hideUntil]="handlers.loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
             <ion-list>
                 <ion-item *ngFor="let handler of handlerItems" class="core-settings-handler" lines="none" [ngClass]="handler.class"
                     [attr.aria-label]="handler.title | translate" (click)="!handler.toggle && handlers.select(handler)"
diff --git a/src/core/features/user/pages/participants/participants.html b/src/core/features/user/pages/participants/participants.html
index 96bb9d5d919..8385dbc133a 100644
--- 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" />
 
diff --git a/src/core/features/user/pages/profile/profile.html b/src/core/features/user/pages/profile/profile.html
index bfd4de83ad9..073adf0861c 100644
--- a/src/core/features/user/pages/profile/profile.html
+++ b/src/core/features/user/pages/profile/profile.html
@@ -12,7 +12,7 @@ <h1>{{ user?.fullname }}</h1>
     <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
-    <core-loading [hideUntil]="userLoaded">
+    <core-loading [hideUntil]="userLoaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
         <ion-list *ngIf="user && !isDeleted && isEnrolled">
             <ion-item class="core-user-profile-maininfo ion-text-wrap" collapsible>
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true" slot="start" />