From 6beb57a8eee23709eb060f0b0babf4d0b904ffe8 Mon Sep 17 00:00:00 2001
From: trtshen <cshen_581@hotmail.com>
Date: Thu, 13 Jun 2024 11:54:24 +0800
Subject: [PATCH] [CORE-6621] chore: Add loading spinner to experiences page

---
 .../src/app/pages/experiences/experiences.page.html  |  7 ++++++-
 .../v3/src/app/pages/experiences/experiences.page.ts | 12 +++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/projects/v3/src/app/pages/experiences/experiences.page.html b/projects/v3/src/app/pages/experiences/experiences.page.html
index ca451866f..fbbfe8bcd 100644
--- a/projects/v3/src/app/pages/experiences/experiences.page.html
+++ b/projects/v3/src/app/pages/experiences/experiences.page.html
@@ -9,7 +9,7 @@ <h1 class="for-accessibility" i18n>Home</h1>
 </ion-header>
 
 <ion-content class="experience-page" [class]="{'mobile': isMobile}">
-  <ng-container *ngIf="(experiences$ | async ) as experiences">
+  <ng-container *ngIf="(experiences$ | async ) as experiences; else loading">
     <header>
       <h1 id="experiences" class="for-accessibility" i18n>Experiences</h1>
       <ion-grid class="ion-no-padding ion-no-margin">
@@ -72,3 +72,8 @@ <h1 class="headline-1 m-0 black ion-hide-sm-down" i18n>Your experiences</h1>
     </main>
   </ng-container>
 </ion-content>
+<ng-template #loading>
+  <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
+    <ion-spinner name="bubbles"></ion-spinner>
+  </div>
+</ng-template>
diff --git a/projects/v3/src/app/pages/experiences/experiences.page.ts b/projects/v3/src/app/pages/experiences/experiences.page.ts
index 7fddef91f..55861538c 100644
--- a/projects/v3/src/app/pages/experiences/experiences.page.ts
+++ b/projects/v3/src/app/pages/experiences/experiences.page.ts
@@ -55,9 +55,15 @@ export class ExperiencesPage implements OnInit, OnDestroy {
         const ids = experiences.map(experience => experience.projectId);
         this.experienceService.getProgresses(ids).subscribe(res => {
           res.forEach(progress => {
-            progress.forEach(project => {
-              this.progresses[project.id] = Math.round(progress.progress * 100);
-            });
+            if (Array.isArray(progress)) {
+              progress.forEach(project => {
+                this.progresses[project.id] = Math.round(project.progress * 100);
+              });
+              return;
+            }
+
+            // single progress objects
+            this.progresses[progress.id] = Math.round(progress.progress * 100);
           });
         });
       });