MOBILE-3812 loading: Apply placeholder types on some main pages

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" />

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. -->

src/addons/block/myoverview/components/myoverview/myoverview.scss

@@ -52,4 +52,8 @@
             @include margin(null, 12px, null, null);
         }
     }
+
+    core-loading {
+        --loading-placeholder-wrap: wrap;
+    }
 }

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. -->

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">

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;
-    }
 }

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>

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. -->

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. -->

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" />
 

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" />

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" />

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>

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>

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;
     }
 }

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"

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" />

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">

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"

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" />

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" />

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" />

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>

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">

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">

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"

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);

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)"

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" />
 

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" />