From 94205791b59240c67cbc0b077440d0e0283a804d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 1 Jun 2021 11:50:43 +0200
Subject: [PATCH] MOBILE-3320 more: Add loading when logging out

---
 .../features/mainmenu/pages/more/more.html    | 162 +++++++++---------
 src/core/features/mainmenu/pages/more/more.ts |   2 +
 2 files changed, 84 insertions(+), 80 deletions(-)

diff --git a/src/core/features/mainmenu/pages/more/more.html b/src/core/features/mainmenu/pages/more/more.html
index eeb136a71..cba182921 100644
--- a/src/core/features/mainmenu/pages/more/more.html
+++ b/src/core/features/mainmenu/pages/more/more.html
@@ -8,90 +8,92 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-list>
-        <ion-item button *ngIf="siteInfo" class="ion-text-wrap" core-user-link [userId]="siteInfo.userid">
-            <core-user-avatar [user]="siteInfo" slot="start"></core-user-avatar>
-            <ion-label>
-                <h2>{{siteInfo.fullname}}</h2>
-                <p>
-                    <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
-                    </core-format-text>
-                </p>
-                <p>{{ siteUrl }}</p>
-            </ion-label>
-        </ion-item>
-        <core-spacer></core-spacer>
-        <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
-            <ion-label><ion-spinner></ion-spinner></ion-label>
-        </ion-item>
-        <ion-item button *ngFor="let handler of handlers" [ngClass]="['core-moremenu-handler', handler.class || '']"
-            (click)="openHandler(handler)" [attr.aria-label]="handler.title | translate" detail="true">
-            <ion-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"></ion-spinner>
-        </ion-item>
-        <ng-container *ngFor="let item of customItems">
-            <ion-item button *ngIf="item.type != 'embedded'" [href]="item.url" [attr.aria-label]="item.label" core-link
-                [capture]="item.type == 'app'" [inApp]="item.type == 'inappbrowser'" class="core-moremenu-customitem" detail="true">
-                <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
+    <core-loading [hideUntil]="!loggedOut">
+        <ion-list>
+            <ion-item button *ngIf="siteInfo" class="ion-text-wrap" core-user-link [userId]="siteInfo.userid">
+                <core-user-avatar [user]="siteInfo" slot="start"></core-user-avatar>
                 <ion-label>
-                    <p class="item-heading">{{item.label}}</p>
+                    <h2>{{siteInfo.fullname}}</h2>
+                    <p>
+                        <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
+                        </core-format-text>
+                    </p>
+                    <p>{{ siteUrl }}</p>
                 </ion-label>
             </ion-item>
-            <ion-item button *ngIf="item.type == 'embedded'" (click)="openItem(item)" [attr.aria-label]="item.label"
-                class="core-moremenu-customitem" detail="true">
-                <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
+            <core-spacer></core-spacer>
+            <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
+                <ion-label><ion-spinner></ion-spinner></ion-label>
+            </ion-item>
+            <ion-item button *ngFor="let handler of handlers" [ngClass]="['core-moremenu-handler', handler.class || '']"
+                (click)="openHandler(handler)" [attr.aria-label]="handler.title | translate" detail="true">
+                <ion-icon [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
-                    <p class="item-heading">{{item.label}}</p>
+                    <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"></ion-spinner>
+            </ion-item>
+            <ng-container *ngFor="let item of customItems">
+                <ion-item button *ngIf="item.type != 'embedded'" [href]="item.url" [attr.aria-label]="item.label" core-link
+                    [capture]="item.type == 'app'" [inApp]="item.type == 'inappbrowser'" class="core-moremenu-customitem" detail="true">
+                    <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-label>
+                        <p class="item-heading">{{item.label}}</p>
+                    </ion-label>
+                </ion-item>
+                <ion-item button *ngIf="item.type == 'embedded'" (click)="openItem(item)" [attr.aria-label]="item.label"
+                    class="core-moremenu-customitem" detail="true">
+                    <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-label>
+                        <p class="item-heading">{{item.label}}</p>
+                    </ion-label>
+                </ion-item>
+            </ng-container>
+            <ion-item button *ngIf="showScanQR" (click)="scanQR()" detail="true">
+                <ion-icon name="fas-qrcode" slot="start" aria-hidden="true"></ion-icon>
+                <ion-label>
+                    <p class="item-heading">{{ 'core.scanqr' | translate }}</p>
                 </ion-label>
             </ion-item>
-        </ng-container>
-        <ion-item button *ngIf="showScanQR" (click)="scanQR()" detail="true">
-            <ion-icon name="fas-qrcode" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>
-                <p class="item-heading">{{ 'core.scanqr' | translate }}</p>
-            </ion-label>
-        </ion-item>
-        <ion-item button *ngIf="showWeb && siteInfo" [href]="siteInfo.siteurl" core-link autoLogin="yes"
-            [attr.aria-label]="'core.mainmenu.website' | translate" detail="true">
-            <ion-icon name="fas-globe" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>
-                <p class="item-heading">{{ 'core.mainmenu.website' | translate }}</p>
-            </ion-label>
-        </ion-item>
-        <ion-item button *ngIf="showHelp" [href]="docsUrl" core-link autoLogin="no"
-            [attr.aria-label]="'core.mainmenu.help' | translate" detail="true">
-            <ion-icon name="far-life-ring" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>
-                <p class="item-heading">{{ 'core.mainmenu.help' | translate }}</p>
-            </ion-label>
-        </ion-item>
-        <ion-item button (click)="openPreferences()" [attr.aria-label]="'core.settings.preferences' | translate" detail="true">
-            <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-item button (click)="logout()" [attr.aria-label]="logoutLabel | translate" detail="true">
-            <ion-icon name="fas-sign-out-alt" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>
-                <p class="item-heading">{{ logoutLabel | translate }}</p>
-            </ion-label>
-        </ion-item>
-        <core-spacer></core-spacer>
-        <ion-item button (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate" detail="true">
-            <ion-icon name="fas-cogs" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>
-                <p class="item-heading">{{ 'core.settings.appsettings' | translate }}</p>
-            </ion-label>
-        </ion-item>
-    </ion-list>
+            <ion-item button *ngIf="showWeb && siteInfo" [href]="siteInfo.siteurl" core-link autoLogin="yes"
+                [attr.aria-label]="'core.mainmenu.website' | translate" detail="true">
+                <ion-icon name="fas-globe" slot="start" aria-hidden="true"></ion-icon>
+                <ion-label>
+                    <p class="item-heading">{{ 'core.mainmenu.website' | translate }}</p>
+                </ion-label>
+            </ion-item>
+            <ion-item button *ngIf="showHelp" [href]="docsUrl" core-link autoLogin="no"
+                [attr.aria-label]="'core.mainmenu.help' | translate" detail="true">
+                <ion-icon name="far-life-ring" slot="start" aria-hidden="true"></ion-icon>
+                <ion-label>
+                    <p class="item-heading">{{ 'core.mainmenu.help' | translate }}</p>
+                </ion-label>
+            </ion-item>
+            <ion-item button (click)="openPreferences()" [attr.aria-label]="'core.settings.preferences' | translate" detail="true">
+                <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-item button (click)="logout()" [attr.aria-label]="logoutLabel | translate" detail="true">
+                <ion-icon name="fas-sign-out-alt" slot="start" aria-hidden="true"></ion-icon>
+                <ion-label>
+                    <p class="item-heading">{{ logoutLabel | translate }}</p>
+                </ion-label>
+            </ion-item>
+            <core-spacer></core-spacer>
+            <ion-item button (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate" detail="true">
+                <ion-icon name="fas-cogs" slot="start" aria-hidden="true"></ion-icon>
+                <ion-label>
+                    <p class="item-heading">{{ 'core.settings.appsettings' | translate }}</p>
+                </ion-label>
+            </ion-item>
+        </ion-list>
+    </core-loading>
 </ion-content>
diff --git a/src/core/features/mainmenu/pages/more/more.ts b/src/core/features/mainmenu/pages/more/more.ts
index 6eb72b24d..733c8a0aa 100644
--- a/src/core/features/mainmenu/pages/more/more.ts
+++ b/src/core/features/mainmenu/pages/more/more.ts
@@ -50,6 +50,7 @@ export class CoreMainMenuMorePage implements OnInit, OnDestroy {
     docsUrl?: string;
     customItems?: CoreMainMenuCustomItem[];
     siteUrl?: string;
+    loggedOut = false;
 
     protected subscription!: Subscription;
     protected langObserver: CoreEventObserver;
@@ -203,6 +204,7 @@ export class CoreMainMenuMorePage implements OnInit, OnDestroy {
      * Logout the user.
      */
     logout(): void {
+        this.loggedOut = true;
         CoreSites.logout();
     }