From 045cd0b92413895a47b7fad8627680c8fb426ed8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Jun 2021 11:01:13 +0200
Subject: [PATCH] MOBILE-3320 core: Fix animations on core loading

---
 src/core/components/loading/core-loading.html  | 5 +++--
 src/core/components/loading/loading.scss       | 4 ++++
 src/core/components/loading/loading.ts         | 6 ++++++
 src/core/features/login/pages/sites/sites.html | 2 +-
 src/core/features/login/pages/sites/sites.ts   | 2 ++
 5 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/core/components/loading/core-loading.html b/src/core/components/loading/core-loading.html
index 7f5006545..c5b6d803b 100644
--- a/src/core/components/loading/core-loading.html
+++ b/src/core/components/loading/core-loading.html
@@ -2,7 +2,8 @@
     <ion-spinner color="primary"></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]>
-    <ng-content *ngIf="hideUntil">
+<div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="!hideUntil" [@coreShowHideAnimation]
+    [class.opacity-hide]="!hideUntil">
+    <ng-content *ngIf="loaded">
     </ng-content>
 </div>
diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
index 98f596285..c29e4f9b7 100644
--- a/src/core/components/loading/loading.scss
+++ b/src/core/components/loading/loading.scss
@@ -43,6 +43,10 @@
         flex-direction: column;
     }
 
+    .core-loading-content {
+        @include core-transition(opacity, 200ms);
+    }
+
     .core-loading-message {
         @include margin(10px, 0, 0, 0);
     }
diff --git a/src/core/components/loading/loading.ts b/src/core/components/loading/loading.ts
index 7b3f0743d..21aa0b8b5 100644
--- a/src/core/components/loading/loading.ts
+++ b/src/core/components/loading/loading.ts
@@ -55,6 +55,7 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
 
     uniqueId: string;
     protected element: HTMLElement; // Current element.
+    loaded = false; // Only comes true once.
 
     constructor(element: ElementRef) {
         this.element = element.nativeElement;
@@ -83,6 +84,7 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
         if (this.hideUntil) {
             this.element.classList.add('core-loading-loaded');
         }
+        this.loaded = !!this.hideUntil;
 
         this.content?.nativeElement.classList.toggle('core-loading-content', !!this.hideUntil);
     }
@@ -94,6 +96,10 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
      */
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
         if (changes.hideUntil) {
+            if (!this.loaded) {
+                this.loaded = !!this.hideUntil; // Only comes true once.
+            }
+
             if (this.hideUntil) {
                 setTimeout(() => {
                     // Content is loaded so, center the spinner on the content itself.
diff --git a/src/core/features/login/pages/sites/sites.html b/src/core/features/login/pages/sites/sites.html
index 280e50172..b373216e3 100644
--- a/src/core/features/login/pages/sites/sites.html
+++ b/src/core/features/login/pages/sites/sites.html
@@ -34,7 +34,7 @@
                 <span class="sr-only">{{ 'core.login.sitebadgedescription' | translate:{ count: site.badge } }}</span>
             </ion-badge>
             <ion-button *ngIf="showDelete" slot="end" fill="clear" color="danger" (click)="deleteSite($event, site)"
-                [attr.aria-label]="'core.delete' | translate">
+                [attr.aria-label]="'core.delete' | translate" [@coreSlideInOut]="'fromRight'">
                 <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-item>
diff --git a/src/core/features/login/pages/sites/sites.ts b/src/core/features/login/pages/sites/sites.ts
index 34d4e873a..e74ac1029 100644
--- a/src/core/features/login/pages/sites/sites.ts
+++ b/src/core/features/login/pages/sites/sites.ts
@@ -22,6 +22,7 @@ import { CoreLoginHelper } from '@features/login/services/login-helper';
 import { CoreNavigator } from '@services/navigator';
 import { CorePushNotifications } from '@features/pushnotifications/services/pushnotifications';
 import { CoreFilter } from '@features/filter/services/filter';
+import { CoreAnimations } from '@components/animations';
 
 /**
  * Page that displays a "splash screen" while the app is being initialized.
@@ -29,6 +30,7 @@ import { CoreFilter } from '@features/filter/services/filter';
 @Component({
     selector: 'page-core-login-sites',
     templateUrl: 'sites.html',
+    animations: [CoreAnimations.SLIDE_IN_OUT],
 })
 export class CoreLoginSitesPage implements OnInit {