Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit c4f741d

Browse files
crazyservercrazyserver
committedJan 30, 2025·
MOBILE-3812 loading: Apply placeholder types on some main pages
1 parent bccfa89 commit c4f741d

File tree

30 files changed

+41
-31
lines changed

30 files changed

+41
-31
lines changed
 

‎src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<h2>{{ 'addon.block_activitymodules.pluginname' | translate }}</h2>
44
</ion-label>
55
</ion-item-divider>
6-
<core-loading [hideUntil]="loaded">
6+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px" [placeholderLimit]="8">
77
<ion-item class="ion-text-wrap" *ngFor="let entry of entries" [detail]="true" button (click)="gotoCoureListModType(entry)">
88
<core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false" [colorize]="false"
99
[isBranded]="entry.branded" />

‎src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ <h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
1818
</div>
1919
</div>
2020
</ion-item-divider>
21-
<core-loading [hideUntil]="loaded">
22-
21+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="120px">
2322
<ion-row class="ion-hide-md-up addon-block-myoverview-filter" *ngIf="hasCourses">
2423
<ion-col>
2524
<!-- Filter courses. -->

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

+4
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,8 @@
5252
@include margin(null, 12px, null, null);
5353
}
5454
}
55+
56+
core-loading {
57+
--loading-placeholder-wrap: wrap;
58+
}
5559
}

‎src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ <h2>{{ 'addon.block_recentlyaccessedcourses.pluginname' | translate }}</h2>
66
<core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId" />
77
</div>
88
</ion-item-divider>
9-
<core-loading [hideUntil]="loaded">
9+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="280px" placeholderHeight="134px" [placeholderLimit]="4">
1010
<core-empty-box *ngIf="courses.length === 0" image="assets/img/icons/courses.svg"
1111
[message]="'addon.block_recentlyaccessedcourses.nocourses' | translate" />
1212
<!-- List of courses. -->

‎src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ <h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2>
66
<core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId" />
77
</div>
88
</ion-item-divider>
9-
<core-loading [hideUntil]="loaded">
9+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="280px" placeholderHeight="66px" [placeholderLimit]="4">
1010
<div [id]="scrollElementId" [hidden]="!items || items.length === 0" class="core-horizontal-scroll"
1111
(scroll)="scrollControls.updateScrollPosition()">
1212
<div *ngIf="items" (onResize)="scrollControls.updateScrollPosition()" class="flex-row">

‎src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss

-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,4 @@
1717
.core-course-module-handler {
1818
--inner-border-width: 0px;
1919
}
20-
core-loading {
21-
--loading-inline-min-height: 102px;
22-
}
2320
}

‎src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
44
</ion-label>
55
</ion-item-divider>
6-
<core-loading [hideUntil]="loaded">
6+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px" [placeholderLimit]="8">
77
<ion-list *ngIf="mainMenuBlock" class="core-course-module-list-wrapper list-item-limited-width">
88
<ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
99
<ion-label>

‎src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ <h2>{{ 'addon.block_starredcourses.pluginname' | translate }}</h2>
66
<core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId" />
77
</div>
88
</ion-item-divider>
9-
<core-loading [hideUntil]="loaded">
9+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="280px" placeholderHeight="134px" [placeholderLimit]="4">
1010
<core-empty-box *ngIf="courses.length === 0" image="assets/img/icons/courses.svg"
1111
[message]="'addon.block_starredcourses.nocourses' | translate" />
1212
<!-- List of courses. -->

‎src/addons/block/timeline/components/timeline/addon-block-timeline.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
44
</ion-label>
55
</ion-item-divider>
6-
<core-loading [hideUntil]="loaded">
6+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="120px" [placeholderLimit]="1">
77
<ion-row class="ion-hide-md-up addon-block-timeline-filter" *ngIf="(search$ | async) !== null">
88
<ion-col>
99
<!-- Filter courses. -->

‎src/addons/messages/pages/discussion/discussion.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ <h1>
6060
</core-navbar-buttons>
6161
</ion-header>
6262
<ion-content (ionScroll)="scrollFunction()">
63-
<core-loading [hideUntil]="loaded">
63+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="36px">
6464
<!-- Load previous messages. -->
6565
<core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError" />
6666

‎src/addons/messages/pages/group-conversations/group-conversations.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ <h1>{{ 'addon.messages.messages' | translate }}</h1>
2525
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
2626
</ion-refresher>
2727

28-
<core-loading [hideUntil]="loaded" [message]="loadingMessage">
28+
<core-loading [hideUntil]="loaded" [message]="loadingMessage" placeholderType="grid" placeholderWidth="100%"
29+
placeholderHeight="48px">
2930
<ion-list>
3031
<ion-item class="ion-text-wrap" (click)="gotoContacts()" [detail]="true" button>
3132
<ion-icon name="fas-address-book" slot="start" aria-hidden="true" />

‎src/addons/notifications/pages/list/list.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
1616
<ion-refresher slot="fixed" [disabled]="!notifications.loaded" (ionRefresh)="refreshNotifications($event.target)">
1717
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
1818
</ion-refresher>
19-
<core-loading [hideUntil]="notifications.loaded">
19+
<core-loading [hideUntil]="notifications.loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
2020
<ion-card class="core-warning-card core-card-with-buttons" *ngIf="!hasNotificationsPermission && !permissionWarningHidden">
2121
<ion-item class="ion-text-wrap">
2222
<ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />

‎src/addons/notifications/pages/settings/settings.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
1919
<ion-refresher slot="fixed" [disabled]="!preferencesLoaded" (ionRefresh)="refreshPreferences($event.target)">
2020
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
2121
</ion-refresher>
22-
<core-loading [hideUntil]="preferencesLoaded">
22+
<core-loading [hideUntil]="preferencesLoaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
2323
@if (warningMessage()) {
2424
<ion-card class="core-warning-card ion-margin-top">
2525
<ion-item>

‎src/addons/storagemanager/pages/courses-storage/courses-storage.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h1>{{ 'addon.storagemanager.managedownloads' | translate }}</h1>
99
</ion-toolbar>
1010
</ion-header>
1111
<ion-content class="limited-width">
12-
<core-loading [hideUntil]="loaded">
12+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="84px">
1313
<div class="ion-padding-horizontal ion-text-wrap" *ngIf="spaceUsage">
1414
<h2>{{ 'addon.storagemanager.alldata' | translate }}</h2>
1515
</div>

‎src/core/features/block/components/block/block.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
}
1414

1515
::ng-deep core-loading {
16-
--loading-inline-min-height: 44px;
16+
--loading-inline-min-height: 60px;
17+
--loading-placeholder-justify: flex-start;
18+
--loading-placeholder-wrap: nowrap;
1719
}
1820
}

‎src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ <h2>
66
</h2>
77
</ion-label>
88
</ion-item-divider>
9-
<core-loading [hideUntil]="loaded" [fullscreen]="false">
9+
<core-loading [hideUntil]="loaded" [fullscreen]="false" placeholderType="grid" placeholderWidth="100%" placeholderHeight="120px"
10+
[placeholderLimit]="1">
1011
<ion-item *ngIf="block.contents?.content" class="ion-text-wrap core-block-content">
1112
<ion-label>
1213
<core-format-text [text]="block.contents?.content" contextLevel="block" [contextInstanceId]="block.instanceid"

‎src/core/features/block/components/side-blocks/side-blocks.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
1212
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
1313
</ion-refresher>
14-
<core-loading [hideUntil]="loaded">
14+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="120px">
1515
<ion-list *ngIf="blocks.length > 0">
1616
<ng-container *ngFor="let block of blocks">
1717
<core-block *ngIf="block.visible" [block]="block" [contextLevel]="contextLevel" [instanceId]="instanceId" />

‎src/core/features/course/components/course-format/course-format.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</core-navbar-buttons>
66
<core-dynamic-component [component]="courseFormatComponent" [data]="data">
77
<!-- Default course format. -->
8-
<core-loading [hideUntil]="loaded">
8+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
99

1010
<!-- Single section. -->
1111
<div *ngIf="selectedSection && selectedSection.id !== allSectionsId" class="list-item-limited-width">

‎src/core/features/course/components/course-index/course-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h1 id="core-course-section-selector-label">{{ 'core.course.courseindex' | trans
1111
</ion-toolbar>
1212
</ion-header>
1313
<ion-content>
14-
<core-loading [hideUntil]="loaded">
14+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
1515
<ion-list *ngIf="loaded" id="core-course-section-selector" role="listbox" aria-labelledby="core-course-section-selector-label">
1616
<ng-container *ngFor="let section of sectionsToRender">
1717
<ion-item *ngIf="allSectionId === section.id" class="divider core-course-index-all"

‎src/core/features/course/pages/contents/contents.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
44
</ion-refresher>
55

6-
<core-loading [hideUntil]="dataLoaded && !updatingData">
6+
<core-loading [hideUntil]="dataLoaded && !updatingData" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
77
<core-course-format [course]="course" [sections]="sections" [initialSectionId]="sectionId" [initialSectionNumber]="sectionNumber"
88
[initialBlockInstanceId]="blockInstanceId" [moduleId]="moduleId" class="core-course-format-{{course.format}}"
99
*ngIf="dataLoaded && sections" [isGuest]="isGuest" />

‎src/core/features/courses/pages/categories/categories.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ <h1>
2323
<ion-refresher slot="fixed" [disabled]="!categoriesLoaded" (ionRefresh)="refreshCategories($event.target)">
2424
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
2525
</ion-refresher>
26-
<core-loading [hideUntil]="categoriesLoaded">
26+
<core-loading [hideUntil]="categoriesLoaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="108px">
2727
<ion-list class="list-item-limited-width">
2828
<ion-item *ngIf="currentCategory" class="ion-text-wrap">
2929
<ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate" />

‎src/core/features/courses/pages/dashboard/dashboard.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
99
</ion-refresher>
1010

11-
<core-loading [hideUntil]="loaded">
11+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="96px">
1212
<ion-list class="list-item-limited-width" *ngIf="hasMainBlocks">
1313
<ng-container *ngFor="let block of blocks">
1414
<core-block *ngIf="block.visible" [block]="block" contextLevel="user" [instanceId]="userId" />

‎src/core/features/courses/pages/list/list.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h1 *ngIf="showOnlyEnrolled">{{ 'core.courses.mycourses' | translate }}</h1>
2828
[placeholder]="'core.courses.search' | translate" [searchLabel]="'core.courses.search' | translate" [autoFocus]="searchMode"
2929
searchArea="CoreCoursesSearch" [lengthCheck]="1" />
3030

31-
<core-loading [hideUntil]="loaded" [message]="loadingMessage">
31+
<core-loading [hideUntil]="loaded" [message]="loadingMessage" placeholderType="grid" placeholderWidth="100%" placeholderHeight="108px">
3232
<ng-container *ngIf="searchMode && searchTotal > 0">
3333
<ion-item-divider>
3434
<ion-label>

‎src/core/features/grades/pages/course/course.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h1>{{ title }}</h1>
1212
<ion-refresher slot="fixed" [disabled]="!columns || !rows" (ionRefresh)="refreshGrades($event.target)">
1313
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
1414
</ion-refresher>
15-
<core-loading [hideUntil]="loaded">
15+
<core-loading [hideUntil]="loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="36px">
1616
<core-empty-box *ngIf="!rows.length" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate" />
1717
<div *ngIf="rows.length" class="core-grades-container">
1818
<table class="core-table core-grades-table" [class.summary]="showSummary">

‎src/core/features/grades/pages/courses/courses.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h1>{{ 'core.grades.grades' | translate }}</h1>
1313
<ion-refresher slot="fixed" [disabled]="!courses.loaded" (ionRefresh)="refreshCourses($event.target)">
1414
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
1515
</ion-refresher>
16-
<core-loading [hideUntil]="courses.loaded">
16+
<core-loading [hideUntil]="courses.loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
1717
<core-empty-box *ngIf="courses.empty" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate" />
1818

1919
<ion-list *ngIf="!courses.empty">

‎src/core/features/mainmenu/components/user-menu/user-menu.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h1>
1313
</ion-toolbar>
1414
</ion-header>
1515
<ion-content>
16-
<core-loading [hideUntil]="handlersLoaded">
16+
<core-loading [hideUntil]="handlersLoaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
1717
<ion-list>
1818
<!-- Site info with URL and clickable. -->
1919
<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

+6
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ ion-tab-button {
9595
}
9696

9797
ion-tabs.placement-bottom {
98+
9899
ion-tab-button {
99100
border-top: 4px solid transparent;
100101
border-bottom: 4px solid transparent;
@@ -134,6 +135,11 @@ ion-tabs.placement-bottom {
134135
ion-tabs.placement-side {
135136
flex-direction: row;
136137

138+
core-loading {
139+
--loading-placeholder-direction: column;
140+
--loading-placeholder-justify: flex-start;
141+
}
142+
137143
ion-tab-bar {
138144
order: -1;
139145
width: var(--menutabbar-size);

‎src/core/features/settings/pages/site/site.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ <h1>{{ 'core.settings.preferences' | translate}}</h1>
1414
<ion-refresher slot="fixed" [disabled]="!handlers.loaded" (ionRefresh)="refreshData($event.target)">
1515
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
1616
</ion-refresher>
17-
<core-loading [hideUntil]="handlers.loaded">
17+
<core-loading [hideUntil]="handlers.loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
1818
<ion-list>
1919
<ion-item *ngFor="let handler of handlerItems" class="core-settings-handler" lines="none" [ngClass]="handler.class"
2020
[attr.aria-label]="handler.title | translate" (click)="!handler.toggle && handlers.select(handler)"

‎src/core/features/user/pages/participants/participants.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<core-search-box [disabled]="searchInProgress" [spellcheck]="false" [lengthCheck]="1" autocorrect="off"
88
searchArea="CoreUserParticipants" (onSubmit)="search($event)" (onClear)="clearSearch()" />
99

10-
<core-loading [hideUntil]="participants.loaded">
10+
<core-loading [hideUntil]="participants.loaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
1111
<core-empty-box *ngIf="participants.empty && !searchInProgress && !searchQuery" icon="far-user"
1212
[message]="'core.user.noparticipants' | translate" />
1313

‎src/core/features/user/pages/profile/profile.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h1>{{ user?.fullname }}</h1>
1212
<ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
1313
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
1414
</ion-refresher>
15-
<core-loading [hideUntil]="userLoaded">
15+
<core-loading [hideUntil]="userLoaded" placeholderType="grid" placeholderWidth="100%" placeholderHeight="48px">
1616
<ion-list *ngIf="user && !isDeleted && isEnrolled">
1717
<ion-item class="core-user-profile-maininfo ion-text-wrap" collapsible>
1818
<core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true" slot="start" />

0 commit comments

Comments
 (0)
Please sign in to comment.