Merge pull request #2826 from crazyserver/MOBILE-3320

Mobile 3320
2021-06-11 15:58:39 +02:00 · 2021-06-11 15:58:39 +02:00 · d8c43d9a47
commit d8c43d9a47
parent ee3bf7c2e5 4640b3975d
39 changed files with 189 additions and 90 deletions
--- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
@ -16,7 +16,8 @@
            [attr.aria-valuetext]="prefetchCoursesData[selectedFilter].badgeA11yText">
            {{prefetchCoursesData[selectedFilter].badge}}
        </ion-badge>
-        <ion-spinner *ngIf="prefetchCoursesData[selectedFilter].loading" aria-hidden="true"></ion-spinner>
+        <ion-spinner *ngIf="prefetchCoursesData[selectedFilter].loading" [attr.aria-label]="'core.loading' | translate">
+        </ion-spinner>
    </div>
    <core-context-menu slot="end">
        <core-context-menu-item *ngIf="loaded && showFilterSwitchButton()" [priority]="1000"
--- a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@ -13,7 +13,8 @@
                [attr.aria-valuenow]="prefetchCoursesData.count" [attr.aria-valuetext]="prefetchCoursesData.badgeA11yText">
                {{prefetchCoursesData.badge}}
            </ion-badge>
-            <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.loading"></ion-spinner>
+            <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.loading"
+                [attr.aria-label]="'core.loading' | translate"></ion-spinner>
        </div>

        <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId">
--- a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
+++ b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
@ -13,7 +13,8 @@
                [attr.aria-valuenow]="prefetchCoursesData.count" [attr.aria-valuetext]="prefetchCoursesData.badgeA11yText">
                {{prefetchCoursesData.badge}}
            </ion-badge>
-            <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.loading"></ion-spinner>
+            <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.loading"
+                [attr.aria-label]="'core.loading' | translate"></ion-spinner>
        </div>

        <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId">
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@ -54,7 +54,7 @@
    <ion-button expand="block" (click)="loadMoreEvents()" color="light" *ngIf="!loadingMore">
        {{ 'core.loadmore' | translate }}
    </ion-button>
-    <ion-spinner *ngIf="loadingMore"></ion-spinner>
+    <ion-spinner *ngIf="loadingMore" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
 </div>

 <core-empty-box *ngIf="empty" image="assets/img/icons/activities.svg" [message]="'addon.block_timeline.noevents' | translate"
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@ -106,7 +106,9 @@
                </ion-item>
                <!-- Loading groups. -->
                <ion-item class="ion-text-wrap" *ngIf="loadingGroups">
-                    <ion-label><ion-spinner *ngIf="loadingGroups"></ion-spinner></ion-label>
+                    <ion-label>
+                        <ion-spinner *ngIf="loadingGroups" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                    </ion-label>
                </ion-item>
            </ng-container>

--- a/src/addons/messageoutput/airnotifier/pages/devices/devices.html
+++ b/src/addons/messageoutput/airnotifier/pages/devices/devices.html
@ -17,10 +17,13 @@
                    {{ device.name }} {{ device.model }} {{ device.platform }} {{ device.version }}
                    <span *ngIf="device.current">({{ 'core.currentdevice' | translate }})</span>
                </ion-label>
-                <ion-spinner *ngIf="device.updating" slot="end"></ion-spinner>
-                <ion-toggle [disabled]="device.updating" [(ngModel)]="device.enable"
-                    (ngModelChange)="enableDevice(device, device.enable)">
-                </ion-toggle>
+                <core-button-with-spinner [loading]="device.updating" slot="end">
+                    <ion-toggle
+                        [(ngModel)]="device.enable"
+                        (ngModelChange)="enableDevice(device, device.enable)"
+                    >
+                    </ion-toggle>
+                </core-button-with-spinner>
            </ion-item>
        </ion-list>
    </core-loading>
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@ -66,7 +66,7 @@
                    </ion-item>
                </div>
                <ion-item class="ion-text-center" *ngIf="favourites.loading">
-                    <ion-label><ion-spinner></ion-spinner></ion-label>
+                    <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
                </ion-item>

                <!-- Group conversations. -->
@ -101,7 +101,7 @@
                    </ion-item>
                </div>
                <ion-item class="ion-text-center" *ngIf="group.loading">
-                    <ion-label><ion-spinner></ion-spinner></ion-label>
+                    <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
                </ion-item>

                <ion-item
@ -138,7 +138,7 @@
                    </ion-item>
                </div>
                <ion-item class="ion-text-center" *ngIf="individual.loading">
-                    <ion-label><ion-spinner></ion-spinner></ion-label>
+                    <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
                </ion-item>

            </ion-list>
--- a/src/addons/messages/pages/search/search.html
+++ b/src/addons/messages/pages/search/search.html
@ -76,7 +76,7 @@
                </ion-button>
            </div>
            <div *ngIf="item.loadingMore" class="ion-padding ion-text-center">
-                <ion-spinner></ion-spinner>
+                <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
            </div>
        </ng-container>
    </ng-container>
--- a/src/addons/messages/pages/settings/settings.html
+++ b/src/addons/messages/pages/settings/settings.html
@ -66,14 +66,21 @@
                        <ng-container *ngIf="groupMessagingEnabled">
                            <ion-item class="ion-text-wrap">
                                <ion-label>{{ processor.displayname }}</ion-label>
-                                <ion-spinner slot="end" *ngIf="!preferences.disableall && notification.updating"></ion-spinner>
-                                <ion-toggle slot="end" *ngIf="!preferences.disableall && !processor.locked"
-                                    [(ngModel)]="processor.checked" (ngModelChange)="changePreference(notification, '', processor)"
-                                    [disabled]="notification.updating">
-                                </ion-toggle>
-                                <ion-note slot="end" *ngIf="!preferences.disableall && processor.locked">
-                                    {{ processor.lockedmessage }}
-                                </ion-note>
+                                <core-button-with-spinner
+                                    *ngIf="!preferences.disableall"
+                                    [loading]="!!notification.updating"
+                                    slot="end"
+                                >
+                                    <ion-toggle
+                                        *ngIf="!processor.locked"
+                                        [(ngModel)]="processor.checked"
+                                        (ngModelChange)="changePreference(notification, '', processor)"
+                                    >
+                                    </ion-toggle>
+                                    <ion-note *ngIf="processor.locked">
+                                        {{ processor.lockedmessage }}
+                                    </ion-note>
+                                </core-button-with-spinner>
                                <ion-note slot="end" *ngIf="preferences.disableall">
                                    {{ 'core.settings.disabled' | translate }}
                                </ion-note>
@ -85,17 +92,20 @@
                            <ion-row class="ion-text-wrap ion-hide-md-down ion-align-items-center">
                                <ion-col class="ion-margin-horizontal">{{ processor.displayname }}</ion-col>
                                <ion-col size="2" class="ion-text-center" *ngFor="let state of ['loggedin', 'loggedoff']">
-                                    <!-- If notifications not disabled, show toggle. -->
-                                    <ion-spinner [hidden]="preferences.disableall ||
-                                        !(notification.updating && notification.updating[state])"></ion-spinner>
-                                    <ion-toggle *ngIf="!preferences.disableall && !processor.locked"
-                                        [(ngModel)]="processor[state].checked"
-                                        (ngModelChange)="changePreference(notification, state, processor)"
-                                        [disabled]="notification.updating && notification.updating[state]">
-                                    </ion-toggle>
-                                    <div class="ion-padding text-gray" *ngIf="!preferences.disableall && processor.locked">
-                                        {{'core.settings.locked' | translate }}
-                                    </div>
+                                    <core-button-with-spinner
+                                        *ngIf="!preferences.disableall"
+                                        [loading]="notification.updating && notification.updating[state]"
+                                    >
+                                        <!-- If notifications not disabled, show toggle. -->
+                                        <ion-toggle *ngIf="!processor.locked"
+                                            [(ngModel)]="processor[state].checked"
+                                            (ngModelChange)="changePreference(notification, state, processor)"
+                                        >
+                                        </ion-toggle>
+                                        <div class="ion-padding text-gray" *ngIf="processor.locked">
+                                            {{'core.settings.locked' | translate }}
+                                        </div>
+                                    </core-button-with-spinner>
                                    <!-- If notifications are disabled, show "Disabled" instead of toggle. -->
                                    <span *ngIf="preferences.disableall">{{ 'core.settings.disabled' | translate }}</span>
                                </ion-col>
@ -108,17 +118,19 @@
                                If notifications are disabled, show "Disabled" instead of toggle. -->
                            <ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap ion-hide-md-up">
                                <ion-label>{{ 'core.settings.' + state | translate }}</ion-label>
-                                <ion-spinner slot="end"
-                                    *ngIf="!preferences.disableall && (notification.updating && notification.updating[state])">
-                                </ion-spinner>
-                                <ion-toggle slot="end" *ngIf="!preferences.disableall && !processor.locked"
-                                    [(ngModel)]="processor[state].checked"
-                                    (ngModelChange)="changePreference(notification, state, processor)"
-                                    [disabled]="notification.updating && notification.updating[state]">
-                                </ion-toggle>
-                                <ion-note slot="end" *ngIf="!preferences.disableall && processor.locked">
-                                    {{'core.settings.locked' | translate }}
-                                </ion-note>
+                                <core-button-with-spinner slot="end"
+                                    *ngIf="!preferences.disableall"
+                                    [loading]="notification.updating && notification.updating[state]"
+                                >
+                                    <ion-toggle *ngIf="!processor.locked"
+                                        [(ngModel)]="processor[state].checked"
+                                        (ngModelChange)="changePreference(notification, state, processor)"
+                                    >
+                                    </ion-toggle>
+                                    <ion-note *ngIf="processor.locked">
+                                        {{'core.settings.locked' | translate }}
+                                    </ion-note>
+                                </core-button-with-spinner>
                                <ion-note slot="end" *ngIf="preferences.disableall">
                                    {{ 'core.settings.disabled' | translate }}
                                </ion-note>
--- a/src/addons/mod/feedback/pages/respondents/respondents.html
+++ b/src/addons/mod/feedback/pages/respondents/respondents.html
@ -47,7 +47,7 @@
                        {{ 'core.loadmore' | translate }}
                    </ion-button>
                    <ion-item *ngIf="responses.responses.canLoadMore && loadingMore" class="ion-text-center">
-                        <ion-label><ion-spinner></ion-spinner></ion-label>
+                        <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
                    </ion-item>
                </ng-container>

@ -70,7 +70,7 @@
                        {{ 'core.loadmore' | translate }}
                    </ion-button>
                    <ion-item *ngIf="responses.anonResponses.canLoadMore && loadingMore" class="ion-text-center">
-                        <ion-label><ion-spinner></ion-spinner></ion-label>
+                        <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
                    </ion-item>
                </ng-container>
            </ion-list>
--- a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
+++ b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
@ -83,7 +83,7 @@
        <!-- Download progress. -->
        <ion-item class="ion-text-center" *ngIf="downloading">
            <ion-label>
-                <ion-spinner></ion-spinner>
+                <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
                <h2 *ngIf="progressMessage">{{ progressMessage | translate }}</h2>
                <core-progress-bar *ngIf="showPercentage" [progress]="percentage" [a11yText]="progressMessage"></core-progress-bar>
            </ion-label>
--- a/src/addons/mod/lesson/components/menu-modal/menu-modal.html
+++ b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
@ -28,7 +28,7 @@
                    <ion-label><h2>{{ 'addon.mod_lesson.lessonmenu' | translate }}</h2></ion-label>
                </ion-item-divider>
                <ion-item class="ion-text-center" *ngIf="pageInstance.loadingMenu">
-                    <ion-label><ion-spinner></ion-spinner></ion-label>
+                    <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
                </ion-item>
                <div *ngIf="!pageInstance.loadingMenu">
                    <ng-container *ngFor="let page of pageInstance.lessonPages">
--- a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
+++ b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
@ -218,7 +218,7 @@

            <!-- Spinner shown while downloading or calculating. -->
            <ion-item class="ion-text-center" *ngIf="showStatusSpinner">
-                <ion-label><ion-spinner></ion-spinner></ion-label>
+                <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
            </ion-item>
        </ion-list>
    </ion-card>
--- a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
+++ b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
@ -143,7 +143,7 @@
                </ion-item>
                <ion-item class="ion-text-center" *ngIf="scorm.displaycoursestructure && loadingToc">
                    <ion-label>
-                        <ion-spinner></ion-spinner>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="scorm.displaycoursestructure && !loadingToc">
@ -240,7 +240,7 @@
                <!-- Download progress. -->
                <ion-item class="ion-text-center" *ngIf="downloading">
                    <ion-label>
-                        <ion-spinner></ion-spinner>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
                        <h2 *ngIf="progressMessage">{{ progressMessage | translate }}</h2>
                        <core-progress-bar *ngIf="showPercentage" [progress]="percentage" [a11yText]="progressMessage">
                        </core-progress-bar>
--- a/src/addons/mod/scorm/pages/player/player.html
+++ b/src/addons/mod/scorm/pages/player/player.html
@ -8,11 +8,12 @@
            </core-format-text>
        </h1>
        <ion-buttons slot="end">
-            <ion-button fill="clear" *ngIf="showToc && !loadingToc && toc.length" (click)="openToc()"
-                [attr.aria-label]="'addon.mod_scorm.toc' | translate" aria-haspopup="true">
-                <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
-            </ion-button>
-            <ion-spinner *ngIf="showToc && loadingToc"></ion-spinner>
+            <core-button-with-spinner *ngIf="showToc" [loading]="loadingToc">
+                <ion-button fill="clear" *ngIf="toc.length" (click)="openToc()"
+                    [attr.aria-label]="'addon.mod_scorm.toc' | translate" aria-haspopup="true">
+                    <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
+                </ion-button>
+            </core-button-with-spinner>
        </ion-buttons>
    </ion-toolbar>
 </ion-header>
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@ -12,14 +12,13 @@
    </ion-refresher>
    <core-loading [hideUntil]="notificationsLoaded">
        <div class="ion-padding" *ngIf="canMarkAllNotificationsAsRead">
-            <ion-button *ngIf="!loadingMarkAllNotificationsAsRead" expand="block" (click)="markAllNotificationsAsRead()"
+            <ion-button [disabled]="loadingMarkAllNotificationsAsRead" expand="block" (click)="markAllNotificationsAsRead()"
                color="light">
-                <ion-icon slot="start" name="fas-check" aria-hidden="true"></ion-icon>
+                <ion-icon slot="start" name="fas-check" aria-hidden="true" *ngIf="!loadingMarkAllNotificationsAsRead"></ion-icon>
+                <ion-spinner slot="start" [attr.aria-label]="'core.loading' | translate" *ngIf="loadingMarkAllNotificationsAsRead">
+                </ion-spinner>
                {{ 'addon.notifications.markallread' | translate }}
            </ion-button>
-            <ion-button *ngIf="loadingMarkAllNotificationsAsRead" expand="block" color="light">
-                <ion-spinner></ion-spinner>
-            </ion-button>
        </div>

        <ion-card *ngFor="let notification of notifications">
--- a/src/core/components/button-with-spinner/button-with-spinner.scss
+++ b/src/core/components/button-with-spinner/button-with-spinner.scss
@ -0,0 +1,15 @@
+:host {
+    font-size: 1.4rem;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: space-around;
+    align-content: center;
+    min-height: var(--a11y-min-target-size);
+    min-width: var(--a11y-min-target-size);
+    position: relative;
+
+    > * {
+        position: absolute;
+    }
+}
--- a/src/core/components/button-with-spinner/button-with-spinner.ts
+++ b/src/core/components/button-with-spinner/button-with-spinner.ts
@ -0,0 +1,37 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input } from '@angular/core';
+import { CoreAnimations } from '@components/animations';
+
+/**
+ * Component to show a button or a spinner when loading.
+ *
+ * Usage:
+ * <core-button-with-spinner [loading]="loading">
+ *     <ion-button>...</ion-button>
+ * </core-button-with-spinner>
+ */
+@Component({
+    selector: 'core-button-with-spinner',
+    templateUrl: 'core-button-with-spinner.html',
+    styleUrls: ['button-with-spinner.scss'],
+    animations: [CoreAnimations.SHOW_HIDE],
+})
+export class CoreButtonWithSpinnerComponent {
+
+    @Input() loading = true;
+    @Input() loadingLabel = 'core.loading';
+
+}
--- a/src/core/components/button-with-spinner/core-button-with-spinner.html
+++ b/src/core/components/button-with-spinner/core-button-with-spinner.html
@ -0,0 +1,6 @@
+<div *ngIf="!loading" [@coreShowHideAnimation]>
+    <ng-content></ng-content>
+</div>
+
+<!-- Spinner. -->
+<ion-spinner *ngIf="loading" [@coreShowHideAnimation] [attr.aria-label]="loadingLabel | translate"></ion-spinner>
--- a/src/core/components/components.module.ts
+++ b/src/core/components/components.module.ts
@ -57,11 +57,13 @@ import { CoreUserAvatarComponent } from './user-avatar/user-avatar';
 import { CoreComboboxComponent } from './combobox/combobox';
 import { CoreSpacerComponent } from './spacer/spacer';
 import { CoreHorizontalScrollControlsComponent } from './horizontal-scroll-controls/horizontal-scroll-controls';
+import { CoreButtonWithSpinnerComponent } from './button-with-spinner/button-with-spinner';

@NgModule({
    declarations: [
        CoreAttachmentsComponent,
        CoreBSTooltipComponent,
+        CoreButtonWithSpinnerComponent,
        CoreChartComponent,
        CoreChronoComponent,
        CoreContextMenuComponent,
@ -108,6 +110,7 @@ import { CoreHorizontalScrollControlsComponent } from './horizontal-scroll-contr
    exports: [
        CoreAttachmentsComponent,
        CoreBSTooltipComponent,
+        CoreButtonWithSpinnerComponent,
        CoreChartComponent,
        CoreChronoComponent,
        CoreContextMenuComponent,
--- a/src/core/components/context-menu/core-context-menu-popover.html
+++ b/src/core/components/context-menu/core-context-menu-popover.html
@ -13,7 +13,8 @@
        <ion-icon *ngIf="(item.href || item.action) && item.iconAction && item.iconAction != 'spinner'" [name]="item.iconAction"
            [class.icon-slash]="item.iconSlash" slot="end" aria-hidden="true">
        </ion-icon>
-        <ion-spinner *ngIf="(item.href || item.action) && item.iconAction == 'spinner'" slot="end"></ion-spinner>
+        <ion-spinner *ngIf="(item.href || item.action) && item.iconAction == 'spinner'" slot="end"
+            [attr.aria-label]="'core.loading' | translate"></ion-spinner>
        <ion-badge class="{{item.badgeClass}}" slot="end" *ngIf="item.badge">
            <span [attr.ara-hidden]="!!item.badgeA11yText">{{item.badge}}</span>
            <span class="sr-only" *ngIf="item.badgeA11yText">
--- a/src/core/components/iframe/core-iframe.html
+++ b/src/core/components/iframe/core-iframe.html
@ -16,6 +16,6 @@
    </ion-button>

    <span class="core-loading-spinner">
-        <ion-spinner *ngIf="loading"></ion-spinner>
+        <ion-spinner *ngIf="loading" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
    </span>
 </div>
--- a/src/core/components/infinite-loading/core-infinite-loading.html
+++ b/src/core/components/infinite-loading/core-infinite-loading.html
@ -25,5 +25,5 @@
 </ng-container>

 <div *ngIf="loadingMore" class="ion-padding ion-text-center" #spinnercontainer>
-    <ion-spinner></ion-spinner>
+    <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
 </div>
--- a/src/core/components/loading/core-loading.html
+++ b/src/core/components/loading/core-loading.html
@ -1,5 +1,5 @@
 <div class="core-loading-container" *ngIf="!hideUntil" role="status" [@coreShowHideAnimation]>
-    <ion-spinner color="primary"></ion-spinner>
+    <ion-spinner color="primary" aria-hidden="true"></ion-spinner>
    <p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
 </div>
 <div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="!hideUntil" [@coreShowHideAnimation]
--- a/src/core/components/tabs-outlet/core-tabs-outlet.html
+++ b/src/core/components/tabs-outlet/core-tabs-outlet.html
@ -1,6 +1,6 @@
 <ion-tabs class="hide-header">
    <ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="!tabs || numTabsShown <= 1" #tabBar>
-        <ion-spinner *ngIf="!hideUntil"></ion-spinner>
+        <ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
        <ion-row *ngIf="hideUntil">
            <ion-col class="col-with-arrow ion-no-padding" (click)="slidePrev()" size="1" [class.clickable]="showPrevButton">
                <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" [attr.aria-label]="'core.previous' | translate"></ion-icon>
--- a/src/core/components/tabs/core-tabs.html
+++ b/src/core/components/tabs/core-tabs.html
@ -1,5 +1,5 @@
 <ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="!tabs || numTabsShown <= 1" #tabBar>
-    <ion-spinner *ngIf="!hideUntil"></ion-spinner>
+    <ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
    <ion-row *ngIf="hideUntil">
        <ion-col class="col-with-arrow ion-no-padding" (click)="slidePrev()" size="1" [class.clickable]="showPrevButton">
            <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" [attr.aria-label]="'core.previous' | translate"></ion-icon>
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@ -114,6 +114,6 @@
        [ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]"
        detail="false"
    >
-        <ion-label><ion-spinner></ion-spinner></ion-label>
+        <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
    </ion-item>
 </ng-container>
--- a/src/core/features/course/pages/preview/preview.html
+++ b/src/core/features/course/pages/preview/preview.html
@ -111,7 +111,8 @@
                    slot="start" [name]="prefetchCourseData.icon" color="success"
                    aria-hidden="true" role="status">
                </ion-icon>
-                <ion-spinner *ngIf="prefetchCourseData.loading" slot="start"></ion-spinner>
+                <ion-spinner *ngIf="prefetchCourseData.loading" slot="start"
+                    [attr.aria-label]="'core.loading' | translate"></ion-spinner>
                <ion-label><h2>{{ 'core.course.downloadcourse' | translate }}</h2></ion-label>
            </ion-item>
            <ion-item button (click)="openCourse()" [attr.aria-label]="course.fullname" *ngIf="!avoidOpenCourse && canAccessCourse"
--- a/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
+++ b/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
@ -1,6 +1,6 @@
 <ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" detail="false">
    <ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true"></ion-icon>
-    <ion-spinner *ngIf="prefetch.loading" slot="start"></ion-spinner>
+    <ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
    <ion-label><h2>{{ prefetch.statusTranslatable | translate }}</h2></ion-label>
 </ion-item>
 <ion-item button class="ion-text-wrap" (click)="action('delete')" detail="false"
--- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
@ -46,7 +46,8 @@

        <div class="core-button-spinner" *ngIf="courseOptionMenuEnabled" slot="end">
            <!-- Download course spinner. -->
-            <ion-spinner *ngIf="(downloadCourseEnabled && prefetchCourseData.icon == 'spinner') || showSpinner"></ion-spinner>
+            <ion-spinner *ngIf="(downloadCourseEnabled && prefetchCourseData.icon == 'spinner') || showSpinner"
+                [attr.aria-label]="'core.loading' | translate"></ion-spinner>

            <!-- Options menu. -->
            <ion-button fill="clear" color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
--- a/src/core/features/courses/pages/my-courses/my-courses.html
+++ b/src/core/features/courses/pages/my-courses/my-courses.html
@ -17,7 +17,7 @@
                </ion-button>
                <ion-spinner [hidden]="!downloadAllCoursesEnabled || !courses || courses.length < 2 ||
                    downloadAllCoursesBadge != '' || !downloadAllCoursesLoading"
-                [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                    [attr.aria-label]="'core.loading' | translate"></ion-spinner>
                <ion-badge [hidden]="!downloadAllCoursesEnabled || !courses || courses.length < 2 || !downloadAllCoursesLoading ||
                    downloadAllCoursesBadge == '' || !downloadAllCoursesLoading"
                    role="progressbar" [attr.aria-valuemax]="downloadAllCoursesTotal"
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@ -59,7 +59,7 @@

                <div class="core-login-site-list-found" [class.hidden]="!hasSites" [class.dimmed]="loadingSites">
                    <div *ngIf="loadingSites" class="core-login-site-list-loading">
-                        <ion-spinner></ion-spinner>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
                    </div>
                    <ng-container *ngFor="let site of sites">
                        <ng-container *ngTemplateOutlet="sitelisting; context: {site: site}"></ng-container>
@ -68,7 +68,7 @@
            </ion-list>

            <div *ngIf="!hasSites && loadingSites" class="core-login-site-nolist-loading">
-                <ion-spinner></ion-spinner>
+                <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
            </div>
        </ng-container>

--- a/src/core/features/mainmenu/pages/menu/menu.html
+++ b/src/core/features/mainmenu/pages/menu/menu.html
@ -1,7 +1,7 @@
 <ion-tabs #mainTabs [hidden]="!showTabs" [class]="'placement-' + tabsPlacement" [class.tabshidden]="hidden"
    (ionTabsDidChange)="tabChanged($event)">
    <ion-tab-bar slot="bottom" [hidden]="hidden" class="mainmenu-tabs">
-        <ion-spinner *ngIf="!loaded"></ion-spinner>
+        <ion-spinner *ngIf="!loaded" [attr.aria-label]="'core.loading' | translate"></ion-spinner>

        <ion-tab-button
            *ngFor="let tab of tabs"
--- a/src/core/features/mainmenu/pages/more/more.html
+++ b/src/core/features/mainmenu/pages/more/more.html
@ -23,7 +23,7 @@
            </ion-item>
            <core-spacer></core-spacer>
            <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
-                <ion-label><ion-spinner></ion-spinner></ion-label>
+                <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
            </ion-item>
            <ion-item button *ngFor="let handler of handlers" [ngClass]="['core-moremenu-handler', handler.class || '']"
                (click)="openHandler(handler)" [attr.aria-label]="handler.title | translate" detail="true">
@ -37,7 +37,8 @@
                <span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only">
                    {{ handler.badgeA11yText | translate: {$a : handler.badge } }}
                </span>
-                <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading"></ion-spinner>
+                <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate">
+                </ion-spinner>
            </ion-item>
            <ng-container *ngFor="let item of customItems">
                <ion-item button *ngIf="item.type != 'embedded'" [href]="item.url" [attr.aria-label]="item.label" core-link
--- a/src/core/features/settings/pages/deviceinfo/deviceinfo.html
+++ b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
@ -123,7 +123,7 @@
    </ion-item>
    <ion-item *ngIf="deviceInfo.uuid" (longPress)="copyItemInfo($event)">
        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.cordovadeviceuuid'}}</h2>
+            <h2>{{ 'core.settings.cordovadeviceuuid' | translate}}</h2>
            <p>{{ deviceInfo.uuid }}</p>
        </ion-label>
    </ion-item>
--- a/src/core/features/settings/pages/site/site.html
+++ b/src/core/features/settings/pages/site/site.html
@ -59,11 +59,12 @@
                        <ion-button fill="clear" [attr.aria-label]="'core.info' | translate" (click)="showSyncInfo()" slot="end">
                            <ion-icon name="fas-info-circle" color="info" slot="icon-only"></ion-icon>
                        </ion-button>
-                        <ion-button fill="clear" slot="end" *ngIf="!isSynchronizing()" (click)="synchronize()"
-                            [attr.aria-label]="'core.settings.synchronizenow' | translate">
-                            <ion-icon name="fas-sync-alt" slot="icon-only" aria-hidden="true"></ion-icon>
-                        </ion-button>
-                        <ion-spinner slot="end" *ngIf="isSynchronizing()"></ion-spinner>
+                        <core-button-with-spinner [loading]="isSynchronizing()" slot="end">
+                            <ion-button fill="clear" (click)="synchronize()"
+                                [attr.aria-label]="'core.settings.synchronizenow' | translate">
+                                <ion-icon name="fas-sync-alt" slot="icon-only" aria-hidden="true"></ion-icon>
+                            </ion-button>
+                        </core-button-with-spinner>
                    </ion-item>
                </ion-card>
            </ion-list>
--- a/src/core/features/settings/pages/synchronization/synchronization.html
+++ b/src/core/features/settings/pages/synchronization/synchronization.html
@ -38,11 +38,12 @@
                <p>{{ site.fullName }}</p>
                <p>{{ site.siteUrl }}</p>
            </ion-label>
-            <ion-button fill="clear" slot="end" *ngIf="!isSynchronizing(site.id)" (click)="synchronize(site.id)"
-                [title]="site.siteName" [attr.aria-label]="'core.settings.synchronizenow' | translate">
-                <ion-icon name="fas-sync-alt" slot="icon-only" aria-hidden="true"></ion-icon>
-            </ion-button>
-            <ion-spinner slot="end" *ngIf="isSynchronizing(site.id)"></ion-spinner>
+            <core-button-with-spinner [loading]="isSynchronizing(site.id)" slot="end">
+                <ion-button fill="clear"  (click)="synchronize(site.id)"
+                    [title]="site.siteName" [attr.aria-label]="'core.settings.synchronizenow' | translate">
+                    <ion-icon name="fas-sync-alt" slot="icon-only" aria-hidden="true"></ion-icon>
+                </ion-button>
+            </core-button-with-spinner>
        </ion-item>
    </core-loading>
 </ion-content>
--- a/src/core/features/user/pages/profile/profile.html
+++ b/src/core/features/user/pages/profile/profile.html
@ -48,7 +48,7 @@
                    </ion-label>
                </ion-item>
                <div *ngIf="isLoadingHandlers" class="ion-text-center core-loading-handlers">
-                    <ion-spinner></ion-spinner>
+                    <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
                </div>
            </div>

@ -61,7 +61,7 @@
                </ion-label>
            </ion-item>
            <ion-item class="ion-text-center core-loading-handlers" *ngIf="isLoadingHandlers">
-                <ion-label><ion-spinner></ion-spinner></ion-label>
+                <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
            </ion-item>

            <ion-item button *ngFor="let handler of newPageHandlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
@ -80,7 +80,7 @@
                        [hidden]="handler.hidden" [attr.aria-label]="handler.title | translate" [disabled]="handler.spinner">
                        <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
                        {{ handler.title | translate }}
-                        <ion-spinner *ngIf="handler.spinner" slot="end"></ion-spinner>
+                        <ion-spinner *ngIf="handler.spinner" slot="end" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
                    </ion-button>
                </ion-label>
            </ion-item>
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@ -690,3 +690,15 @@ core-rich-text-editor .core-rte-editor {
        }
    }
 }
+
+// h1 is too big and ugly, reduce size when loading.
+ion-header.ios h1 core-format-text {
+    &.core-format-text-loading {
+        max-height: 30px;
+        margin-top: 10px;
+    }
+    &.core-format-text-content {
+        display: block;
+        margin-top: -10px;
+    }
+}