loading progress NaN fix

ui/src/app/components/status/status.component.html

@@ -6,15 +6,14 @@
 >
   <span *ngIf= "!installProgress">
     {{ disconnected ? 'Unknown' : rendering.display }}
-    <ion-spinner *ngIf="rendering.showDots" class="dots" name="dots"></ion-spinner>
+    <span *ngIf="rendering.showDots">...</span>
   </span>
   <span *ngIf="installProgress">
     <span *ngIf="installProgress < 99">
-      Installing
+      Installing... {{ installProgress }}%
-      <ion-spinner class="dots" name="dots"></ion-spinner>{{ installProgress }}%
     </span>
     <span *ngIf="installProgress >= 99">
-      Finalizing install. This could take a minute<ion-spinner class="dots" name="dots"></ion-spinner>
+      Finalizing install. This could take a minute...
     </span>
   </span>
 

ui/src/app/components/status/status.component.scss

@@ -1,4 +0,0 @@
-.dots {
-  position: absolute;
-  bottom: 3px;
-}

ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.scss

@@ -15,7 +15,7 @@
 .warning-icon {
   position: absolute !important;
   left: 6px !important;
-  top: 0 !important;
+  top: 6px !important;
   font-size: 12px;
   border-radius: 100%;
   padding: 1px;

ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts

@@ -1,22 +1,22 @@
-import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { PkgInfo } from "src/app/util/get-package-info";
+import { PkgInfo } from 'src/app/util/get-package-info'
 
 @Component({
-  selector: "app-list-icon",
+  selector: 'app-list-icon',
-  templateUrl: "app-list-icon.component.html",
+  templateUrl: 'app-list-icon.component.html',
-  styleUrls: ["app-list-icon.component.scss"],
+  styleUrls: ['app-list-icon.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppListIconComponent {
   @Input()
-  pkg: PkgInfo;
+  pkg: PkgInfo
 
   @Input()
-  connectionFailure = false;
+  connectionFailure = false
 
   get color (): string {
     return this.connectionFailure
-      ? "var(--ion-color-dark)"
+      ? 'var(--ion-color-dark)'
-      : "var(--ion-color-" + this.pkg.primaryRendering.color + ")";
+      : 'var(--ion-color-' + this.pkg.primaryRendering.color + ')'
   }
 }

ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.html

@@ -14,7 +14,7 @@
 <ion-list *ngIf="reordering; else grid">
   <ion-reorder-group disabled="false" (ionItemReorder)="reorder($any($event))">
     <ion-reorder *ngFor="let item of pkgs">
-      <ion-item *ngIf="item | packageInfo | async as pkg" class="item">
+      <ion-item color="light" *ngIf="item | packageInfo | async as pkg" class="item">
         <app-list-icon
           slot="start"
           [pkg]="pkg"

ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html

@@ -109,7 +109,7 @@
                   <ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 1" color="warning">Update Available</ion-text>
                 </p>
                 <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
-                  <ion-text color="primary">{{ localPkg.state | titlecase }}...
+                  <ion-text color="primary">
                     <span>{{ (localPkg['install-progress'] | installState).display }}</span>
                   </ion-text>
                 </p>

ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html

@@ -32,7 +32,7 @@
                   </p>
                   <!-- installing, updating -->
                   <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
-                    <ion-text color="primary">{{ localPkg.state | titlecase }}...{{ (localPkg['install-progress'] | installState).display }}</ion-text>
+                    <ion-text color="primary">{{ (localPkg['install-progress'] | installState).display }}</ion-text>
                   </p>
                   <!-- removing -->
                   <p *ngIf="localPkg.state === PackageState.Removing">

ui/src/app/pipes/install-state.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core'
 import { InstallProgress } from '../services/patch-db/data-model'
-import { packageLoadingProgress, ProgressData } from '../util/package-loading-progress';
+import { packageLoadingProgress, ProgressData } from '../util/package-loading-progress'
 
 @Pipe({
   name: 'installState',

ui/src/app/services/api/embassy-mock-api.service.ts

@@ -646,38 +646,29 @@ export class MockApiService extends ApiService {
         if (i === initialProgress.size) {
           initialProgress[phase.completion] = true
         }
-        let patch: any
+
-        if (initialProgress['unpack-complete']) {
+        const patch = [
-          patch = [
-            {
-              op: PatchOp.REMOVE,
-              path: `/package-data/${id}/install-progress`,
-            },
-            // {
-            //   op: PatchOp.REMOVE,
-            //   path: `/recovered-packages/${id}`,
-            // } as RemoveOperation,
-          ]
-        } else {
-          patch = [
           {
             op: PatchOp.REPLACE,
             path: `/package-data/${id}/install-progress`,
             value: initialProgress,
           },
         ]
-        }
         this.updateMock(patch)
       }
     }
 
     setTimeout(() => {
-      const patch2 = [
+      const patch2: any = [
         {
           op: PatchOp.REPLACE,
           path: `/package-data/${id}`,
           value: Mock.LocalPkgs[id],
         },
+        {
+          op: PatchOp.REMOVE,
+          path: `/package-data/${id}/install-progress`,
+        },
       ]
       this.updateMock(patch2)
     }, 1000)

ui/src/app/util/package-loading-progress.ts

@@ -28,17 +28,19 @@ export function packageLoadingProgress (
       unpackWeight * unpacked,
   )
 
+
   const denominator = Math.floor(
     size * (downloadWeight + validateWeight + unpackWeight),
   )
   const totalProgress = Math.floor(100 * numerator / denominator)
+
   return {
     totalProgress,
     downloadProgress: Math.floor((100 * downloaded) / size),
     validateProgress: Math.floor((100 * validated) / size),
     unpackProgress: Math.floor((100 * unpacked) / size),
     isComplete: downloadComplete && validationComplete && unpackComplete,
-    display: totalProgress > 98 ? 'Finalizing' : `${totalProgress}%`,
+    display: totalProgress > 98 ? 'Finalizing...' : `Installing... ${totalProgress}%`,
   }
 }