From 224a7baa7d702b3d00775b56e8d1b28636063ba7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 4 Jun 2021 12:44:48 +0200
Subject: [PATCH] MOBILE-3320 core: Improvements on loading component

---
 .../addon-block-recentlyaccesseditems.html    |  2 +-
 .../recentlyaccesseditems.scss                |  3 +++
 src/core/components/loading/loading.scss      | 22 ++++++++++---------
 3 files changed, 16 insertions(+), 11 deletions(-)

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 f63f935a5..4990142ad 100644
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@@ -5,7 +5,7 @@
         </core-horizontal-scroll-controls>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page margin">
+<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
     <div
         [id]="scrollElementId"
         [hidden]="!items || items.length === 0"
diff --git a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
index ce246a96f..06802f880 100644
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
@@ -8,4 +8,7 @@
     .core-course-module-handler {
         --inner-border-width: 0;
     }
+    core-loading {
+        --loading-inline-min-height: 102px;
+    }
 }
diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
index ba0bcd3d6..4cadd853f 100644
--- a/src/core/components/loading/loading.scss
+++ b/src/core/components/loading/loading.scss
@@ -2,21 +2,24 @@
 
 :host {
     --loading-background: var(--ion-background-color);
+    --loading-background-inline: var(--ion-background-color-rgb);
     --loading-spinner: var(--ion-color-primary);
     --loading-text-color: var(--ion-text-color);
     --loading-inline-margin: 0;
     --loading-inline-min-height: 28px;
+    --internal-loading-inline-min-height: var(--loading-inline-min-height);
 
     position: static;
     color: var(--loading-text-color);
+    @include core-transition(all, 200ms);
 
     &.margin {
         --loading-inline-margin: 10px;
+        --internal-loading-inline-min-height: calc(var(--loading-inline-min-height) + var(--loading-inline-margin) + var(--loading-inline-margin));
     }
 
     &.core-loading-loaded {
-        --loading-inline-margin: 0;
-        --loading-inline-min-height: 0;
+        --internal-loading-inline-min-height: 0;
     }
 
     ion-spinner {
@@ -27,17 +30,17 @@
     .core-loading-container {
         position: absolute;
         @include position(0, 0, 0, 0);
-        display: flex;
         height: 100%;
         width: 100%;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
         z-index: 3;
         margin: 0;
         padding: 0;
         background-color: var(--loading-background);
         @include core-transition(all, 200ms);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
     }
 
     .core-loading-message {
@@ -54,15 +57,14 @@
 
     &.core-loading-loaded {
         position: unset;
+        display: contents;
     }
 
     &.core-loading-inline {
-        --loading-background: transparent;
+        --loading-background: rgba(var(--loading-background-inline), 0.5);
         position: relative;
         display: block;
-        min-height: var(--loading-inline-min-height);
-        margin-top: var(--loading-inline-margin);
-        margin-bottom: var(--loading-inline-margin);
+        min-height: var(--internal-loading-inline-min-height);
 
         .core-loading-message {
             @include margin(0, 0, 0, 10px);