refactor(patch-db): use PatchDB class declaratively (#1562)

* refactor(patch-db): use PatchDB class declaratively

* chore: remove initial source before init

* chore: show spinner

* fix: show Connecting to Embassy spinner until first connection

* fix: switching marketplaces

* allow for subscription to end with take when installing a package

* update patchdb

Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title *ngIf="patch.loaded else loading">
+    <ion-title *ngIf="connected$ | async else loading">
       {{ (ui$ | async)?.name || "Embassy-" + (server$ | async)?.id }}
     </ion-title>
     <ng-template #loading>
@@ -14,13 +14,12 @@
 
 <ion-content class="ion-padding">
   <!-- loading -->
-  <text-spinner
-    *ngIf="!patch.loaded else data"
-    text="Connecting to Embassy"
-  ></text-spinner>
+  <ng-template #spinner>
+    <text-spinner text="Connecting to Embassy"></text-spinner>
+  </ng-template>
 
   <!-- not loading -->
-  <ng-template #data>
+  <ng-container *ngIf="connected$ | async else spinner">
     <ion-item-group *ngIf="server$ | async as server">
       <div *ngFor="let cat of settings | keyvalue : asIsOrder">
         <ion-item-divider>
@@ -98,5 +97,5 @@
         </ng-container>
       </div>
     </ion-item-group>
-  </ng-template>
+  </ng-container>
 </ion-content>

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts

@@ -10,7 +10,7 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ActivatedRoute } from '@angular/router'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { Observable, of } from 'rxjs'
-import { filter, map, take } from 'rxjs/operators'
+import { filter, take } from 'rxjs/operators'
 import { exists, isEmptyObject, ErrorToastService } from '@start9labs/shared'
 import { EOSService } from 'src/app/services/eos.service'
 import { LocalStorageService } from 'src/app/services/local-storage.service'
@@ -28,6 +28,7 @@ export class ServerShowPage {
 
   readonly server$ = this.patch.watch$('server-info')
   readonly ui$ = this.patch.watch$('ui')
+  readonly connected$ = this.patch.connected$
 
   constructor(
     private readonly alertCtrl: AlertController,
@@ -37,8 +38,8 @@ export class ServerShowPage {
     private readonly embassyApi: ApiService,
     private readonly navCtrl: NavController,
     private readonly route: ActivatedRoute,
+    private readonly patch: PatchDbService,
     public readonly eosService: EOSService,
-    public readonly patch: PatchDbService,
     public readonly localStorageService: LocalStorageService,
   ) {}