bitwarden · JaredScar · Apr 17, 2026 · Apr 17, 2026 · Apr 17, 2026 · Apr 17, 2026
@@ -25,6 +25,7 @@ import {
   switchMap,
   take,
   takeUntil,
+  tap,
 } from "rxjs/operators";
 
 import { CollectionAdminService, CollectionService } from "@bitwarden/admin-console/common";
@@ -194,6 +195,8 @@ export class VaultComponent implements OnInit, OnDestroy {
 
   private searchText$ = new Subject<string>();
   protected refreshingSubject$ = new BehaviorSubject<boolean>(true);
+  private _loadStartTime = 0;
+  private _elapsedS = () => ((performance.now() - this._loadStartTime) / 1000).toFixed(2) + "s";
   private destroy$ = new Subject<void>();
   protected addAccessStatus$ = new BehaviorSubject<AddAccessStatusType>(0);
   private vaultItemDialogRef?: DialogRef<VaultItemDialogResult> | undefined;
@@ -280,8 +283,32 @@ export class VaultComponent implements OnInit, OnDestroy {
     this.allCollectionsWithoutUnassigned$ = this.refreshingSubject$.pipe(
       filter((refreshing) => refreshing),
       switchMap(() => combineLatest([this.organizationId$, this.userId$])),
-      switchMap(([orgId, userId]) =>
-        this.collectionAdminService.collectionAdminViews$(orgId, userId),
+      switchMap(
+        ([orgId, userId]) =>
+          // Subscribe to collectionAdminViews$ outside Angular's zone so the setTimeout
+          // yields in our chunked decryptMany loop don't each trigger a full CD pass.
+          // We subscribe directly (rather than firstValueFrom) to preserve re-emissions
+          // from upstream sources such as orgKeys$ — e.g. on key rotation the collections
+          // are re-decrypted automatically. ngZone.run() re-enters the zone exactly once
+          // per emission so Angular gets a single CD pass when new data is ready.
+          new Observable<CollectionAdminView[]>((observer) => {
+            const sub = this.ngZone.runOutsideAngular(() =>
+              this.collectionAdminService
+                .collectionAdminViews$(orgId, userId)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe({
+                  next: (result) => this.ngZone.run(() => observer.next(result)),
+                  error: (e: unknown) => this.ngZone.run(() => observer.error(e)),
+                  complete: () => this.ngZone.run(() => observer.complete()),
+                }),
+            );
+            return () => sub.unsubscribe();
+          }),
+      ),
+      tap((collections) =>
+        this.logService.debug(
+          `[Collections] Collections decrypted: ${collections.length} collections (+${this._elapsedS()})`,
+        ),
       ),
       shareReplay({ refCount: true, bufferSize: 1 }),
     );
@@ -304,7 +331,27 @@ export class VaultComponent implements OnInit, OnDestroy {
     );
 
     this.nestedCollections$ = this.allCollections$.pipe(
-      map((collections) => getNestedCollectionTree(collections)),
+      // Run the O(N²) nestedTraverse outside Angular's zone so:
+      // 1. The deferred setTimeout does not trigger a spurious CD run when it fires.
+      // 2. The tree-build itself (potentially hundreds of ms for 8K collections) does
+      //    not block Angular's CD scheduler.
+      // ngZone.run() re-enters the zone exactly once when the result is ready.
+      switchMap(
+        (collections) =>
+          new Observable<TreeNode<CollectionAdminView>[]>((observer) => {
+            const cancel = this.ngZone.runOutsideAngular(() => {
+              const id = setTimeout(() => {
+                const result = getNestedCollectionTree(collections);
+                this.ngZone.run(() => {
+                  observer.next(result);
+                  observer.complete();
+                });
+              }, 0);
+              return () => clearTimeout(id);
+            });
+            return cancel;
+          }),
+      ),
       shareReplay({ refCount: true, bufferSize: 1 }),
     );
 
@@ -325,30 +372,56 @@ export class VaultComponent implements OnInit, OnDestroy {
         if (!this.showAddAccessToggle || organization) {
           this.addAccessToggle(0);
         }
-        let ciphers;
 
         // Restricted providers (who are not members) do not have access org cipher endpoint below
         // Return early to avoid 404 response
         if (!organization.isMember && organization.isProviderUser) {
           return [];
         }
 
-        // If the user can edit all ciphers for the organization then fetch them ALL.
-        if (organization.canEditAllCiphers) {
-          ciphers = await this.cipherService.getAllFromApiForOrganization(organization.id);
-          ciphers.forEach((c) => (c.edit = true));
-        } else {
-          // Otherwise, only fetch ciphers they have access to (includes unassigned for admins).
-          ciphers = await this.cipherService.getManyFromApiForOrganization(organization.id);
-        }
-
-        // Filter out restricted ciphers before indexing
-        ciphers = ciphers.filter(
-          (cipher) => !this.restrictedItemTypesService.isCipherRestricted(cipher, restricted),
-        );
+        // Run the heavy fetch → decrypt → index pipeline outside Angular's zone.
+        //
+        // Our chunked decryption and indexing loops yield via setTimeout(0) between
+        // batches to keep the browser responsive. However, zone.js intercepts every
+        // setTimeout callback and triggers a full Angular change-detection pass. With
+        // Default CD strategy that can mean 40+ full-tree scans during loading — each
+        // one blocking the main thread for tens of milliseconds. Running outside the
+        // zone means the yields genuinely free the browser without triggering CD.
+        // Angular gets a single CD run when this promise resolves and the observable
+        // emits the completed cipher array.
+        const ciphers = await new Promise<CipherView[]>((resolve, reject) => {
+          void this.ngZone.runOutsideAngular(async () => {
+            try {
+              let result: CipherView[];
+
+              // If the user can edit all ciphers for the organization then fetch them ALL.
+              if (organization.canEditAllCiphers) {
+                result = await this.cipherService.getAllFromApiForOrganization(organization.id);
+                result.forEach((c) => (c.edit = true));
+              } else {
+                // Otherwise, only fetch ciphers they have access to (includes unassigned for admins).
+                result = await this.cipherService.getManyFromApiForOrganization(organization.id);
+              }
+
+              // Filter out restricted ciphers before indexing
+              result = result.filter(
+                (cipher) => !this.restrictedItemTypesService.isCipherRestricted(cipher, restricted),
+              );
+
+              resolve(result);
+            } catch (e) {
+              reject(e);
+            }
+          });
+        });
 
         return ciphers;
       }),
+      tap((ciphers) =>
+        this.logService.debug(
+          `[Collections] Ciphers fetched & decrypted: ${ciphers.length} ciphers (+${this._elapsedS()})`,
+        ),
+      ),
       shareReplay({ refCount: true, bufferSize: 1 }),
     );
 
@@ -465,16 +538,15 @@ export class VaultComponent implements OnInit, OnDestroy {
       this.organization$,
     ]).pipe(
       filter(([collections, filter]) => collections != undefined && filter != undefined),
-      concatMap(
+      switchMap(
         async ([collections, filter, searchText, addAccessStatus, userId, organization]) => {
           if (
             filter.collectionId === Unassigned ||
             (filter.collectionId === undefined && filter.type !== undefined)
           ) {
-            return [];
+            return { collections: [] as CollectionAdminView[], showToggle: false };
           }
 
-          this.showAddAccessToggle = false;
           let searchableCollectionNodes: TreeNode<CollectionAdminView>[] = [];
           if (filter.collectionId === undefined || filter.collectionId === All) {
             searchableCollectionNodes = collections;
@@ -506,17 +578,24 @@ export class VaultComponent implements OnInit, OnDestroy {
           }
 
           // Add access toggle is only shown if allowAdminAccessToAllCollectionItems is false and there are unmanaged collections the user can edit
-          this.showAddAccessToggle =
+          const showToggle =
             !organization.allowAdminAccessToAllCollectionItems &&
             organization.canEditUnmanagedCollections &&
             collectionsToReturn.some((c) => c.unmanaged);
 
-          if (addAccessStatus === 1 && this.showAddAccessToggle) {
+          if (addAccessStatus === 1 && showToggle) {
             collectionsToReturn = collectionsToReturn.filter((c) => c.unmanaged);
           }
-          return collectionsToReturn;
+          return { collections: collectionsToReturn, showToggle };
         },
       ),
+      // Separate the side effect (updating component state) from the data computation above.
+      // tap is the designated operator for side effects in RxJS pipelines, making the data
+      // flow explicit and preventing accidental change-detection triggers mid-pipeline.
+      tap(({ showToggle }) => {
+        this.showAddAccessToggle = showToggle;
+      }),
+      map(({ collections }) => collections),
       takeUntil(this.destroy$),
       shareReplay({ refCount: true, bufferSize: 1 }),
     );
@@ -546,10 +625,22 @@ export class VaultComponent implements OnInit, OnDestroy {
         ([refreshing, processing, firstLoadComplete]) =>
           refreshing || processing || !firstLoadComplete,
       ),
+      tap((loading) => {
+        if (!loading && this._loadStartTime > 0) {
+          this.logService.debug(`[Collections] Fully loaded — total time: ${this._elapsedS()}`);
+        }
+      }),
     );
   }
 
   async ngOnInit() {
+    this.refreshingSubject$.pipe(takeUntil(this.destroy$)).subscribe((refreshing) => {
+      if (refreshing) {
+        this._loadStartTime = performance.now();
+        this.logService.debug("[Collections] Load started");
+      }
+    });
+
     const firstSetup$ = combineLatest([this.organization$, this.route.queryParams]).pipe(
       first(),
       switchMap(async ([organization]) => {

@@ -123,7 +123,7 @@
       </tr>
     </ng-container>
     <ng-template body let-rows$>
-      <ng-container *cdkVirtualFor="let item of rows$; templateCacheSize: 0">
+      <ng-container *cdkVirtualFor="let item of rows$; templateCacheSize: 20">
         @if (item.collection) {
           <tr
             bitRow

@@ -89,9 +89,16 @@ export class VaultItemsComponent<C extends CipherViewLike> {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() allOrganizations: Organization[] = [];
+  private _allCollections: CollectionView[] = [];
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() allCollections: CollectionView[] = [];
+  @Input() get allCollections(): CollectionView[] {
+    return this._allCollections;
+  }
+  set allCollections(value: CollectionView[] | undefined) {
+    this._allCollections = value ?? [];
+    this.refreshItems();
+  }
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() allGroups: GroupView[] = [];
@@ -156,6 +163,13 @@ export class VaultItemsComponent<C extends CipherViewLike> {
   protected canRestoreSelected$: Observable<boolean>;
   protected disableMenu$: Observable<boolean>;
   private restrictedTypes: RestrictedCipherType[] = [];
+  /**
+   * A Set of collection IDs where the current user has the "manage" permission. Built once per
+   * refreshItems() call (O(K)) so that canManageCollection() lookups are O(1) instead of O(K)
+   * per cipher row, which would otherwise be O(ciphers × collections) on every change-detection
+   * cycle.
+   */
+  private manageableCollectionIds = new Set<string>();
 
   constructor(
     protected cipherAuthorizationService: CipherAuthorizationService,
@@ -507,12 +521,17 @@ export class VaultItemsComponent<C extends CipherViewLike> {
       return this.activeCollection.manage === true;
     }
 
-    return this.allCollections
-      .filter((c) => cipher.collectionIds.includes(c.id as any))
-      .some((collection) => collection.manage);
+    // Use the pre-computed Set for an O(1) lookup instead of scanning allCollections
+    // (O(K) per cipher). The set is rebuilt in refreshItems() whenever inputs change.
+    return cipher.collectionIds.some((id) => this.manageableCollectionIds.has(id as string));
   }
 
   private refreshItems() {
+    // Rebuild the manageable-collection lookup Set so canManageCollection() calls are O(1).
+    this.manageableCollectionIds = new Set(
+      (this.allCollections ?? []).filter((c) => c.manage).map((c) => c.id as string),
+    );
+
     const collections: VaultItem<C>[] = this.collections.map((collection) => ({ collection }));
     const ciphers: VaultItem<C>[] = this.ciphers
       .filter(

@@ -134,24 +134,28 @@ export class DefaultCollectionAdminService implements CollectionAdminService {
     collections: CollectionResponse[] | CollectionAccessDetailsResponse[],
     orgKeys: Record<OrganizationId, OrgKey>,
   ): Promise<CollectionAdminView[]> {
-    const promises = collections.map(async (c) => {
-      if (isCollectionAccessDetailsResponse(c)) {
-        return CollectionAdminView.fromCollectionAccessDetails(
-          c,
-          this.encryptService,
-          orgKeys[organizationId as OrganizationId],
-        );
-      }
-
-      return await CollectionAdminView.fromCollectionResponse(
-        c,
-        this.encryptService,
-        orgKeys[organizationId as OrganizationId],
+    const orgKey = orgKeys[organizationId as OrganizationId];
+
+    // Promise.all(8K) floods the microtask queue — decrypt in chunks with event-loop
+    // yields so the browser can paint and handle input between each batch.
+    const DECRYPT_CHUNK_SIZE = 2_000;
+    const results: CollectionAdminView[] = [];
+    for (let i = 0; i < collections.length; i += DECRYPT_CHUNK_SIZE) {
+      const chunk = collections.slice(i, i + DECRYPT_CHUNK_SIZE);
+      const decrypted = await Promise.all(
+        chunk.map(async (c) => {
+          if (isCollectionAccessDetailsResponse(c)) {
+            return CollectionAdminView.fromCollectionAccessDetails(c, this.encryptService, orgKey);
+          }
+          return await CollectionAdminView.fromCollectionResponse(c, this.encryptService, orgKey);
+        }),
       );
-    });
-
-    const r = await Promise.all(promises);
-    return r;
+      results.push(...decrypted);
+      if (i + DECRYPT_CHUNK_SIZE < collections.length) {
+        await new Promise<void>((r) => setTimeout(r, 0));
+      }
+    }
+    return results;
   }
 
   private async encrypt(

@@ -777,7 +777,9 @@ export class CipherService implements CipherServiceAbstraction {
 
       const [cipherViews] = await this.cipherEncryptionService.decryptManyLegacy(ciphers, userId);
 
-      // Sort by locale (matching existing behavior)
+      // Yield one macrotask before the sort so the browser can paint and respond to input
+      // (e.g. a sidebar click) before the O(N log N) locale-sort blocks the main thread.
+      await new Promise<void>((r) => setTimeout(r, 0));
       cipherViews.sort(this.getLocaleSortingFunction());
 
       return cipherViews;
@@ -809,12 +811,23 @@ export class CipherService implements CipherServiceAbstraction {
 
     const ciphers = response.data.map((cr) => new Cipher(new CipherData(cr)));
     const key = await this.keyService.getOrgKey(organizationId);
-    const decCiphers: CipherView[] = await Promise.all(
-      ciphers.map(async (cipher) => {
-        return await cipher.decrypt(key);
-      }),
-    );
 
+    // Promise.all(80K) floods the microtask queue — decrypt in chunks with event-loop
+    // yields so the browser can paint and handle input between each batch.
+    const DECRYPT_CHUNK_SIZE = 2_000;
+    const decCiphers: CipherView[] = [];
+    for (let i = 0; i < ciphers.length; i += DECRYPT_CHUNK_SIZE) {
+      const chunk = ciphers.slice(i, i + DECRYPT_CHUNK_SIZE);
+      const decrypted = await Promise.all(chunk.map((c) => c.decrypt(key)));
+      decCiphers.push(...decrypted);
+      if (i + DECRYPT_CHUNK_SIZE < ciphers.length) {
+        await new Promise<void>((r) => setTimeout(r, 0));
+      }
+    }
+
+    // Yield one macrotask before the sort so the browser can paint and respond to input
+    // before the O(N log N) locale-sort blocks the main thread.
+    await new Promise<void>((r) => setTimeout(r, 0));
     decCiphers.sort(this.getLocaleSortingFunction());
     return decCiphers;
   }

@@ -209,6 +209,14 @@ export class DefaultCipherEncryptionService implements CipherEncryptionService {
           const successful: CipherView[] = [];
           const failed: CipherView[] = [];
 
+          // Each SDK decrypt() call resolves synchronously (WASM), so each `await` only
+          // queues a microtask — never yielding to the browser event loop. For large
+          // org vaults (80 K ciphers) this blocks painting and input for several seconds.
+          // Yielding via setTimeout(0) every CHUNK_SIZE ciphers converts the flood of
+          // microtasks into discrete macrotasks the browser event loop can schedule around.
+          const DECRYPT_CHUNK_SIZE = 2_000;
+          let processed = 0;
+
           for (const cipher of ciphers) {
             try {
               const sdkCipherView = await ref.value.vault().ciphers().decrypt(cipher.toSdkCipher());
@@ -246,6 +254,11 @@ export class DefaultCipherEncryptionService implements CipherEncryptionService {
               failedView.decryptionFailure = true;
               failed.push(failedView);
             }
+
+            processed++;
+            if (processed % DECRYPT_CHUNK_SIZE === 0) {
+              await new Promise<void>((r) => setTimeout(r, 0));
+            }
           }
 
           return [successful, failed] as [CipherView[], CipherView[]];