spinner working

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

@@ -4,29 +4,29 @@ import {
   EventEmitter,
   Input,
   Output,
-} from "@angular/core";
-import { AlertController } from "@ionic/angular";
-import { ApiService } from "src/app/services/api/embassy-api.service";
-import { ErrorToastService } from "src/app/services/error-toast.service";
-import { from, merge, OperatorFunction, pipe, Subject } from "rxjs";
-import { catchError, mapTo, startWith, switchMap, tap } from "rxjs/operators";
-import { RecoveredInfo } from "src/app/util/parse-data-model";
+} from '@angular/core'
+import { AlertController } from '@ionic/angular'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { ErrorToastService } from 'src/app/services/error-toast.service'
+import { from, merge, OperatorFunction, pipe, Subject } from 'rxjs'
+import { catchError, mapTo, startWith, switchMap, tap } from 'rxjs/operators'
+import { RecoveredInfo } from 'src/app/util/parse-data-model'
 
 @Component({
-  selector: "app-list-rec",
-  templateUrl: "app-list-rec.component.html",
+  selector: 'app-list-rec',
+  templateUrl: 'app-list-rec.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppListRecComponent {
   // Asynchronous actions initiators
-  readonly install$ = new Subject<RecoveredInfo>();
-  readonly delete$ = new Subject<RecoveredInfo>();
+  readonly install$ = new Subject<RecoveredInfo>()
+  readonly delete$ = new Subject<RecoveredInfo>()
 
   @Input()
-  rec: RecoveredInfo;
+  rec: RecoveredInfo
 
   @Output()
-  readonly deleted = new EventEmitter<void>();
+  readonly deleted = new EventEmitter<void>()
 
   // Installing package
   readonly installing$ = this.install$.pipe(
@@ -34,10 +34,10 @@ export class AppListRecComponent {
       // Mapping each installation to API request
       from(this.api.installPackage({ id })).pipe(
         // Mapping operation to true/false loading indication
-        loading(this.errToast)
-      )
-    )
-  );
+        loading(this.errToast),
+      ),
+    ),
+  )
 
   // Deleting package
   readonly deleting$ = this.delete$.pipe(
@@ -47,52 +47,52 @@ export class AppListRecComponent {
         // Notifying parent component that package is removed from recovered items
         tap(() => this.deleted.emit()),
         // Mapping operation to true/false loading indication
-        loading(this.errToast))
-    )
-  );
+        loading(this.errToast)),
+    ),
+  )
 
   // Merging both true/false loading indicators to a single stream
-  readonly loading$ = merge(this.installing$, this.deleting$);
+  readonly loading$ = merge(this.installing$, this.deleting$)
 
-  constructor(
+  constructor (
     private readonly api: ApiService,
     private readonly errToast: ErrorToastService,
-    private readonly alertCtrl: AlertController
-  ) {}
+    private readonly alertCtrl: AlertController,
+  ) { }
 
-  async deleteRecovered(pkg: RecoveredInfo): Promise<void> {
+  async deleteRecovered (pkg: RecoveredInfo): Promise<void> {
     const alert = await this.alertCtrl.create({
-      header: "Delete Data",
+      header: 'Delete Data',
       message: `This action will permanently delete all data associated with ${pkg.title}.`,
       buttons: [
         {
-          text: "Cancel",
-          role: "cancel",
+          text: 'Cancel',
+          role: 'cancel',
         },
         {
-          text: "Delete",
+          text: 'Delete',
           handler: () => {
             // Initiate deleting of 'pkg'
-            this.delete$.next(pkg);
+            this.delete$.next(pkg)
           },
-          cssClass: "enter-click",
+          cssClass: 'enter-click',
         },
       ],
-    });
-    await alert.present();
+    })
+    await alert.present()
   }
 }
 
 // Custom RxJS operator to turn asynchronous operation into a true/false loading indicator
-function loading(
-  errToast: ErrorToastService
+function loading (
+  errToast: ErrorToastService,
 ): OperatorFunction<unknown, boolean> {
   return pipe(
-    // Start operation with true
-    startWith(true),
     // Show notification on error
     catchError((e) => from(errToast.present(e))),
     // Map any result to false to stop loading inidicator
-    mapTo(false)
-  );
+    mapTo(false),
+    // Start operation with true
+    startWith(true),
+  )
 }