From ffa95a5115e56588fc81032df4681fec4322f869 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 19 Apr 2022 11:06:19 +0200
Subject: [PATCH 1/2] MOBILE-3833 loading: Let the user scroll on the content
 on iOS

---
 src/core/components/loading/loading.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
index e6cebfac7..06b8be6c9 100644
--- a/src/core/components/loading/loading.scss
+++ b/src/core/components/loading/loading.scss
@@ -101,4 +101,6 @@
 :host-context(.ios) {
     --contents-display: flex;
     flex-direction: column;
+    max-height: max-content;
+    width: 100%;
 }

From 91e8d8af5538d7080a3c41c0b8ebb7a5448a8e97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 19 Apr 2022 15:58:18 +0200
Subject: [PATCH 2/2] MOBILE-3833 loading: Fix loading occupying full height

---
 .../components/index/addon-mod-glossary-index.html    |  9 +++++----
 src/core/components/loading/loading.scss              | 11 ++++++-----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
index 69824078c..613c62a6e 100644
--- a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
+++ b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
@@ -1,15 +1,16 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button *ngIf="glossary && glossary.browsemodes && glossary.browsemodes.length > 1" (click)="openModePicker($event)"
+    <ion-button *ngIf="!showLoading && glossary && glossary.browsemodes && glossary.browsemodes.length > 1" (click)="openModePicker($event)"
         [attr.aria-label]="'addon.mod_glossary.browsemode' | translate">
         <ion-icon name="fas-sort" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
 
-    <ion-button *ngIf="glossary" (click)="toggleSearch()" [attr.aria-label]="'addon.mod_glossary.bysearch' | translate">
+    <ion-button *ngIf="!showLoading && glossary" (click)="toggleSearch()" [attr.aria-label]="'addon.mod_glossary.bysearch' | translate">
         <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
 
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button *ngIf="!showLoading" fill="clear" (click)="openModuleSummary()" aria-haspopup="true"
+        [attr.aria-label]="'core.info' | translate">
         <ion-icon name="fas-info-circle" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
 </core-navbar-buttons>
@@ -77,7 +78,7 @@
     <core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id">
     </core-course-module-navigation>
 
-    <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canAdd">
+    <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canAdd && !showLoading">
         <ion-fab-button (click)="openNewEntry()" [attr.aria-label]="'addon.mod_glossary.addentry' | translate">
             <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
             <span class="sr-only">{{ 'addon.mod_glossary.addentry' | translate }}</span>
diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
index 06b8be6c9..4f0a58034 100644
--- a/src/core/components/loading/loading.scss
+++ b/src/core/components/loading/loading.scss
@@ -3,9 +3,9 @@
 @mixin inline() {
     min-height: var(--internal-loading-inline-min-height);
     max-height: 100vh; // In order show it on the page (content will be cut).
+    position: relative;
 
     &:not(.core-loading-loaded) {
-        position: relative;
         --contents-display: flex;
         flex-direction: column;
     }
@@ -15,6 +15,7 @@
         flex-direction: row;
         height: auto;
         width: auto;
+        position: absolute;
 
         .core-loading-message {
             @include margin(0, 0, 0, 10px);
@@ -32,14 +33,14 @@
     --internal-loading-inline-min-height: var(--loading-inline-min-height);
     --loading-display: flex;
     --loading-display-message: block;
-    --contents-display: contents;
+    --contents-display: block;
 
     @include core-transition(all, 200ms);
     pointer-events: none;
     display: var(--contents-display);
 
     &.core-loading-loaded {
-        position: static;
+        --contents-display: contents;
         pointer-events: auto;
         --internal-loading-inline-min-height: 0px;
 
@@ -52,11 +53,11 @@
 
     .core-loading-container {
         pointer-events: none;
-        position: absolute;
+        position: fixed;
         @include position(0, 0, 0, 0);
         height: 100%;
         width: 100%;
-        z-index: 3;
+        z-index: 100;
         margin: 0;
         padding: 0;
         color: var(--loading-text-color);