feat(app): add load progress based on number of loaded items

HSF · Apr 23, 2021 · 20ef288 · 20ef288
1 parent e3d83ea
commit 20ef288
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 21 deletions.
diff --git a/packages/phoenix-event-display/src/managers/loading-manager.ts b/packages/phoenix-event-display/src/managers/loading-manager.ts
@@ -35,6 +35,7 @@ export class LoadingManager {
    */
   public addLoadableItem(id: string = '') {
     this.toLoad.push(id);
+    this.progressItems[id] = 0;
   }
 
   /**
@@ -43,6 +44,8 @@ export class LoadingManager {
    */
   public itemLoaded(id: string = '') {
     this.loaded.push(id);
+    this.onProgress(id, 100);
+
     if (
       this.toLoad.length === this.loaded.length &&
       this.toLoad.sort().join(',') === this.loaded.sort().join(',')
@@ -54,11 +57,11 @@ export class LoadingManager {
 
   /**
    * When an item loading progresses.
-   * @param itemName Name of the item with the progress.
+   * @param id ID of the item with the progress.
    * @param progress Progress of the item.
    */
-  public onProgress(itemName: string, progress: number) {
-    this.progressItems[itemName] = progress;
+  public onProgress(id: string, progress: number) {
+    this.progressItems[id] = progress;
 
     let totalProgress = Object.values(this.progressItems).reduce(
       (acc, val) => acc + val,

diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.html b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.html
@@ -1,4 +1,4 @@
-<app-loader [loaded]="loaded"></app-loader>
+<app-loader [loaded]="loaded" [progress]="loadingProgress"></app-loader>
 <app-nav></app-nav>
 <app-ui-menu [eventDataImportOptions]="['JSON', 'IG']"></app-ui-menu>
 <app-experiment-info

diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.ts
@@ -19,6 +19,7 @@ export class CMSComponent implements OnInit {
     'phoenix-menu'
   );
   loaded = false;
+  loadingProgress = 0;
 
   constructor(private eventDisplay: EventDisplayService) {}
 
@@ -57,8 +58,12 @@ export class CMSComponent implements OnInit {
       }
     );
 
-    this.eventDisplay.getLoadingManager().addLoadListenerWithCheck(() => {
-      this.loaded = true;
-    });
+    this.eventDisplay
+      .getLoadingManager()
+      .addProgressListener((progress) => (this.loadingProgress = progress));
+
+    this.eventDisplay
+      .getLoadingManager()
+      .addLoadListenerWithCheck(() => (this.loaded = true));
   }
 }
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/_theming.scss b/packages/phoenix-ng/projects/phoenix-ui-components/_theming.scss
@@ -10,6 +10,8 @@ $light-theme: mat-light-theme($primary, $accent, $warn);
 @include angular-material-theme($light-theme);
 
 :root {
+  --phoenix-primary: #118ab2;
+  --phoenix-secondary: #f1e833;
   --phoenix-background-color: #ffffff;
   --phoenix-background-color-secondary: #f5f5f5;
   --phoenix-background-color-tertiary: #e6e6e6;

diff --git a/...ges/phoenix-ng/projects/phoenix-ui-components/src/components/loader/loader.component.html b/...ges/phoenix-ng/projects/phoenix-ui-components/src/components/loader/loader.component.html
@@ -1,12 +1,13 @@
 <div
-  class="loader-wrapper d-flex justify-content-center align-items-center text-center"
+  class="loader-wrapper d-flex position-absolute flex-column justify-content-center align-items-center w-100 h-100 text-center"
   [ngClass]="{ 'load-complete': loaded }"
 >
-  <div>
-    <img src="assets/images/logo-small.svg" alt="Loader" />
-    <p class="mt-5">
-      Loading...<br />
-      <small class="text-muted">(This may take a while)</small>
-    </p>
+  <img src="assets/images/logo-small.svg" alt="Loader" />
+  <p class="mt-5">
+    Loading...<br />
+    <small class="text-muted">(This may take a while)</small>
+  </p>
+  <div class="loading-bar" *ngIf="progress">
+    <span [style]="{ width: progress + '%' }"></span>
   </div>
 </div>
diff --git a/...ges/phoenix-ng/projects/phoenix-ui-components/src/components/loader/loader.component.scss b/...ges/phoenix-ng/projects/phoenix-ui-components/src/components/loader/loader.component.scss
@@ -1,12 +1,11 @@
 .loader-wrapper {
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
   background: var(--phoenix-background-color);
   z-index: 9998;
 
+  &.load-complete {
+    display: none !important;
+  }
+
   img {
     width: 5rem;
     height: 5rem;
@@ -17,8 +16,26 @@
     color: var(--phoenix-text-color);
   }
 
-  &.load-complete {
-    display: none !important;
+  .loading-bar {
+    width: 15rem;
+    max-width: 90%;
+    height: 0.5rem;
+    background: var(--phoenix-background-color-tertiary);
+    border-radius: 2.5rem;
+    overflow: hidden;
+
+    span {
+      display: block;
+      height: 100%;
+      border-radius: 2.5rem;
+      background: linear-gradient(
+        to right,
+        var(--phoenix-primary),
+        var(--phoenix-secondary)
+      );
+
+      transition: width 0.5s;
+    }
   }
 }
 

diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/src/components/loader/loader.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/src/components/loader/loader.component.ts
@@ -7,4 +7,5 @@ import { Component, Input } from '@angular/core';
 })
 export class LoaderComponent {
   @Input() loaded = false;
+  @Input() progress: number;
 }