MOBILE-3320 core: Fix animations on core loading

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]>
+<div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="!hideUntil" [@coreShowHideAnimation]
-    <ng-content *ngIf="hideUntil">
+    [class.opacity-hide]="!hideUntil">
+    <ng-content *ngIf="loaded">
     </ng-content>
 </div>

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);
     }

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.

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>

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 {