[PM-17094] - Vault and Collection filters pop in after Vault content causing content to shift (#13165)

* add loading state service for vault list filters and apply to vault

* remove call to delay and requestAnimationFrame

* use shareReplay

* update loading state to also check for filters

* remove reassignment

* add sharereplay to vault list filters.

apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 import { ReactiveFormsModule } from "@angular/forms";
-import { combineLatest, map } from "rxjs";
+import { combineLatest, map, shareReplay } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ChipSelectComponent } from "@bitwarden/components";
@@ -34,6 +34,7 @@ export class VaultListFiltersComponent {
         folders,
       };
     }),
+    shareReplay({ bufferSize: 1, refCount: false }),
   );
 
   constructor(private vaultPopupListFiltersService: VaultPopupListFiltersService) {}

apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts

@@ -86,7 +86,12 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
 
   protected favoriteCiphers$ = this.vaultPopupItemsService.favoriteCiphers$;
   protected remainingCiphers$ = this.vaultPopupItemsService.remainingCiphers$;
-  protected loading$ = this.vaultPopupItemsService.loading$;
+  protected allFilters$ = this.vaultPopupListFiltersService.allFilters$;
+
+  protected loading$ = combineLatest([this.vaultPopupItemsService.loading$, this.allFilters$]).pipe(
+    map(([itemsLoading, filters]) => itemsLoading || !filters),
+    shareReplay({ bufferSize: 1, refCount: true }),
+  );
 
   protected newItemItemValues$: Observable<NewItemInitialValues> =
     this.vaultPopupListFiltersService.filters$.pipe(
@@ -111,8 +116,6 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
 
   protected VaultStateEnum = VaultState;
 
-  private allFilters$ = this.vaultPopupListFiltersService.allFilters$;
-
   constructor(
     private vaultPopupItemsService: VaultPopupItemsService,
     private vaultPopupListFiltersService: VaultPopupListFiltersService,

apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts

@@ -255,6 +255,7 @@ export class VaultPopupListFiltersService {
         }),
       ];
     }),
+    shareReplay({ refCount: true, bufferSize: 1 }),
   );
 
   /**
@@ -330,6 +331,7 @@ export class VaultPopupListFiltersService {
         ),
       );
     }),
+    shareReplay({ refCount: true, bufferSize: 1 }),
   );
 
   /**
@@ -366,6 +368,7 @@ export class VaultPopupListFiltersService {
     map((collections) =>
       collections.nestedList.map((c) => this.convertToChipSelectOption(c, "bwi-collection")),
     ),
+    shareReplay({ refCount: true, bufferSize: 1 }),
   );
 
   /** Organizations, collection, folders filters. */