[PM-12704] - fix loading state for send list (#11264)

* fix loading state for send service

* fix test

* fix test and service

apps/browser/src/tools/popup/send-v2/send-v2.component.html

@@ -1,4 +1,4 @@
-<popup-page>
+<popup-page [loading]="sendsLoading$ | async">
   <popup-header slot="header" [pageTitle]="'send' | i18n">
     <ng-container slot="end">
       <tools-new-send-dropdown *ngIf="!sendsDisabled"></tools-new-send-dropdown>

apps/browser/src/tools/popup/send-v2/send-v2.component.spec.ts

@@ -59,6 +59,7 @@ describe("SendV2Component", () => {
         { id: "1", name: "Send A" },
         { id: "2", name: "Send B" },
       ] as SendView[]),
+      loading$: of(false),
       latestSearchText$: of(""),
     });
 

apps/browser/src/tools/popup/send-v2/send-v2.component.ts

@@ -55,6 +55,7 @@ export class SendV2Component implements OnInit, OnDestroy {
 
   protected listState: SendState | null = null;
   protected sends$ = this.sendItemsService.filteredAndSortedSends$;
+  protected sendsLoading$ = this.sendItemsService.loading$;
   protected title: string = "allSends";
   protected noItemIcon = NoSendsIcon;
   protected noResultsIcon = Icons.NoResults;

libs/tools/send/send-ui/src/services/send-items.service.spec.ts

@@ -62,9 +62,15 @@ describe("SendItemsService", () => {
   it("should update loading$ when sends are loading", (done) => {
     const sendsLoading$ = new Subject<void>();
     (service as any)._sendsLoading$ = sendsLoading$;
+    let sendLoadingIndex = 0;
     service.loading$.subscribe((loading) => {
-      expect(loading).toBe(true);
-      done();
+      if (sendLoadingIndex === 0) {
+        expect(loading).toBe(true);
+        sendLoadingIndex++;
+      } else {
+        expect(loading).toBe(false);
+        done();
+      }
     });
 
     sendsLoading$.next();

libs/tools/send/send-ui/src/services/send-items.service.ts

@@ -5,6 +5,7 @@ import {
   distinctUntilChanged,
   from,
   map,
+  merge,
   Observable,
   shareReplay,
   startWith,
@@ -47,7 +48,9 @@ export class SendItemsService {
     this._searchText$,
     this.sendListFiltersService.filterFunction$,
   ]).pipe(
-    tap(() => this._sendsLoading$.next()),
+    tap(() => {
+      this._sendsLoading$.next();
+    }),
     map(([sends, searchText, filterFunction]): [SendView[], string] => [
       filterFunction(sends),
       searchText,
@@ -60,9 +63,10 @@ export class SendItemsService {
   /**
    * Observable that indicates whether the service is currently loading sends.
    */
-  loading$: Observable<boolean> = this._sendsLoading$
-    .pipe(map(() => true))
-    .pipe(startWith(true), distinctUntilChanged(), shareReplay({ refCount: false, bufferSize: 1 }));
+  loading$: Observable<boolean> = merge(
+    this._sendsLoading$.pipe(map(() => true)),
+    this.filteredAndSortedSends$.pipe(map(() => false)),
+  ).pipe(startWith(true), distinctUntilChanged(), shareReplay({ refCount: false, bufferSize: 1 }));
 
   /**
    * Observable that indicates whether a filter is currently applied to the sends.