From 63927d6ba16f18dffd4dbacba8add0883b2682fa Mon Sep 17 00:00:00 2001
From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com>
Date: Thu, 20 Feb 2025 14:18:43 -0800
Subject: [PATCH] [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.
---
 .../vault-list-filters/vault-list-filters.component.ts   | 3 ++-
 .../popup/components/vault-v2/vault-v2.component.ts      | 9 ++++++---
 .../popup/services/vault-popup-list-filters.service.ts   | 3 +++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.ts
index 53c3cb2287..feccf92cec 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.ts
+++ b/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) {}
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
index be5c33aab7..73b691bc4a 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
+++ b/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,
diff --git a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts
index b145131849..59ccde3bd4 100644
--- a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts
+++ b/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. */