From 74670a270269994af9c04cc5313240e994a07fd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 9 Mar 2022 16:39:51 +0100
Subject: [PATCH] MOBILE-3814 user-menu: Add loading spinner

---
 .../components/user-menu/user-menu.html       | 102 +++++++++---------
 .../components/user-menu/user-menu.ts         |   3 -
 2 files changed, 52 insertions(+), 53 deletions(-)

diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.html b/src/core/features/mainmenu/components/user-menu/user-menu.html
index 3932978ae..d6e138a39 100644
--- a/src/core/features/mainmenu/components/user-menu/user-menu.html
+++ b/src/core/features/mainmenu/components/user-menu/user-menu.html
@@ -13,59 +13,61 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-list>
-        <ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo" lines="full" detail="false" [href]="siteUrl"
-            core-link auto-login="yes">
-            <ion-label>
-                <!-- Show site logo. -->
-                <img class="core-usermenu-site-logo" *ngIf="siteLogo && siteLogoLoaded" [src]="siteLogo" role="presentation" alt=""
-                    onError="this.class='image-not-found'">
-                <p class="core-usermenu-sitename">
-                    <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
-                    </core-format-text>
-                </p>
-                <a [href]="siteUrl" core-link auto-login="yes" class="core-usermenu-siteurl">{{ siteUrl }}</a>
-            </ion-label>
-        </ion-item>
-        <ion-item button class="core-usermenu-handler ion-text-wrap" *ngIf="siteInfo" lines="full" (click)="openUserProfile($event)"
-            detail="true" [attr.aria-label]="'core.user.profile' | translate">
-            <core-user-avatar [user]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start"></core-user-avatar>
-            <ion-label>
-                <h2>{{ siteInfo.fullname }}</h2>
-            </ion-label>
-        </ion-item>
+    <core-loading [hideUntil]="siteLogoLoaded && handlersLoaded">
+        <ion-list>
+            <ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo" lines="full" detail="false" [href]="siteUrl"
+                core-link auto-login="yes">
+                <ion-label>
+                    <!-- Show site logo. -->
+                    <img class="core-usermenu-site-logo" *ngIf="siteLogo && siteLogoLoaded" [src]="siteLogo" role="presentation" alt=""
+                        onError="this.class='image-not-found'">
+                    <p class="core-usermenu-sitename">
+                        <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
+                        </core-format-text>
+                    </p>
+                    <a [href]="siteUrl" core-link auto-login="yes" class="core-usermenu-siteurl">{{ siteUrl }}</a>
+                </ion-label>
+            </ion-item>
+            <ion-item button class="core-usermenu-handler ion-text-wrap" *ngIf="siteInfo" lines="full" (click)="openUserProfile($event)"
+                detail="true" [attr.aria-label]="'core.user.profile' | translate">
+                <core-user-avatar [user]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start"></core-user-avatar>
+                <ion-label>
+                    <h2>{{ siteInfo.fullname }}</h2>
+                </ion-label>
+            </ion-item>
 
-        <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
-            <ion-label>
-                <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
-            </ion-label>
-        </ion-item>
+            <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
+                <ion-label>
+                    <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                </ion-label>
+            </ion-item>
 
-        <ion-item button *ngFor="let handler of handlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
-            [ngClass]="['core-user-menu-handler', handler.class || '']" [hidden]="handler.hidden"
-            [attr.aria-label]="handler.title | translate" detail="true">
-            <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>
-                <p class="item-heading">{{ handler.title | translate }}</p>
-            </ion-label>
-            <ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge" aria-hidden="true">
-                {{handler.badge}}
-            </ion-badge>
-            <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" [attr.aria-label]="'core.loading' | translate">
-            </ion-spinner>
-        </ion-item>
+            <ion-item button *ngFor="let handler of handlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
+                [ngClass]="['core-user-menu-handler', handler.class || '']" [hidden]="handler.hidden"
+                [attr.aria-label]="handler.title | translate" detail="true">
+                <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
+                <ion-label>
+                    <p class="item-heading">{{ handler.title | translate }}</p>
+                </ion-label>
+                <ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge" aria-hidden="true">
+                    {{handler.badge}}
+                </ion-badge>
+                <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" [attr.aria-label]="'core.loading' | translate">
+                </ion-spinner>
+            </ion-item>
 
-        <ion-item button (click)="openPreferences($event)" [attr.aria-label]="'core.settings.preferences' | translate" detail="true"
-            class="core-user-menu-preferences">
-            <ion-icon name="fas-wrench" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>
-                <p class="item-heading">{{ 'core.settings.preferences' | translate }}</p>
-            </ion-label>
-        </ion-item>
-    </ion-list>
+            <ion-item button (click)="openPreferences($event)" [attr.aria-label]="'core.settings.preferences' | translate" detail="true"
+                class="core-user-menu-preferences">
+                <ion-icon name="fas-wrench" slot="start" aria-hidden="true"></ion-icon>
+                <ion-label>
+                    <p class="item-heading">{{ 'core.settings.preferences' | translate }}</p>
+                </ion-label>
+            </ion-item>
+        </ion-list>
+    </core-loading>
 </ion-content>
 <ion-footer>
     <ion-item *ngIf="displaySwitchAccount" button lines="full" (click)="switchAccounts($event)" detail="true" class="ion-text-wrap">
diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.ts b/src/core/features/mainmenu/components/user-menu/user-menu.ts
index 87cd958f9..c84bc642a 100644
--- a/src/core/features/mainmenu/components/user-menu/user-menu.ts
+++ b/src/core/features/mainmenu/components/user-menu/user-menu.ts
@@ -49,7 +49,6 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
     siteUrl?: string;
     handlers: CoreUserProfileHandlerData[] = [];
     handlersLoaded = false;
-    loaded = false;
     user?: CoreUserProfile;
     displaySwitchAccount = true;
     removeAccountOnLogout = false;
@@ -68,8 +67,6 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
         this.displaySwitchAccount = !currentSite.isFeatureDisabled('NoDelegate_SwitchAccount');
         this.removeAccountOnLogout = !!CoreConstants.CONFIG.removeaccountonlogout;
 
-        this.loaded = true;
-
         this.loadSiteLogo(currentSite);
 
         // Load the handlers.