[PM-18946] Improve Vault loading experience (#13714)

* [PM-18946] Refactor loading$ in vault-v2. Update icon-component, and build-cipher-icon

apps/browser/src/autofill/background/overlay.background.spec.ts

@@ -969,7 +969,7 @@ describe("OverlayBackground", () => {
             icon: {
               fallbackImage: "",
               icon: "bwi-credit-card",
-              image: undefined,
+              image: null,
               imageEnabled: true,
             },
             id: "inline-menu-cipher-0",
@@ -1007,7 +1007,7 @@ describe("OverlayBackground", () => {
               icon: {
                 fallbackImage: "",
                 icon: "bwi-id-card",
-                image: undefined,
+                image: null,
                 imageEnabled: true,
               },
               id: "inline-menu-cipher-1",
@@ -1048,7 +1048,7 @@ describe("OverlayBackground", () => {
               icon: {
                 fallbackImage: "",
                 icon: "bwi-id-card",
-                image: undefined,
+                image: null,
                 imageEnabled: true,
               },
               id: "inline-menu-cipher-0",
@@ -1120,7 +1120,7 @@ describe("OverlayBackground", () => {
               icon: {
                 fallbackImage: "",
                 icon: "bwi-id-card",
-                image: undefined,
+                image: null,
                 imageEnabled: true,
               },
               id: "inline-menu-cipher-1",

apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts

@@ -355,7 +355,7 @@ describe("OverlayBackground", () => {
           icon: {
             fallbackImage: "",
             icon: "bwi-credit-card",
-            image: undefined,
+            image: null,
             imageEnabled: true,
           },
           id: "overlay-cipher-2",
@@ -370,7 +370,7 @@ describe("OverlayBackground", () => {
           icon: {
             fallbackImage: "",
             icon: "bwi-credit-card",
-            image: undefined,
+            image: null,
             imageEnabled: true,
           },
           id: "overlay-cipher-3",

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

@@ -28,10 +28,7 @@
   ></blocked-injection-banner>
 
   <!-- Show search & filters outside of the scroll area of the page -->
-  <ng-container
-    slot="above-scroll-area"
-    *ngIf="vaultState !== VaultStateEnum.Empty && !(loading$ | async)"
-  >
+  <ng-container slot="above-scroll-area" *ngIf="vaultState !== VaultStateEnum.Empty">
     <vault-at-risk-password-callout
       *appIfFeature="FeatureFlag.SecurityTasks"
     ></vault-at-risk-password-callout>

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

@@ -2,7 +2,6 @@ import { CdkVirtualScrollableElement, ScrollingModule } from "@angular/cdk/scrol
 import { CommonModule } from "@angular/common";
 import { AfterViewInit, Component, DestroyRef, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { RouterLink } from "@angular/router";
 import {
   combineLatest,
   filter,
@@ -12,29 +11,24 @@ import {
   shareReplay,
   switchMap,
   take,
+  startWith,
 } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { VaultProfileService } from "@bitwarden/angular/vault/services/vault-profile.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { CipherId, CollectionId, OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
-import {
-  BannerComponent,
-  ButtonModule,
-  DialogService,
-  Icons,
-  NoItemsModule,
-} from "@bitwarden/components";
+import { ButtonModule, DialogService, Icons, NoItemsModule } from "@bitwarden/components";
 import { DecryptionFailureDialogComponent, VaultIcons } from "@bitwarden/vault";
 
 import { CurrentAccountComponent } from "../../../../auth/popup/account-switching/current-account.component";
 import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
 import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
+import { VaultPopupCopyButtonsService } from "../../services/vault-popup-copy-buttons.service";
 import { VaultPopupItemsService } from "../../services/vault-popup-items.service";
 import { VaultPopupListFiltersService } from "../../services/vault-popup-list-filters.service";
 import { VaultPopupScrollPositionService } from "../../services/vault-popup-scroll-position.service";
@@ -73,12 +67,9 @@ enum VaultState {
     AutofillVaultListItemsComponent,
     VaultListItemsContainerComponent,
     ButtonModule,
-    RouterLink,
     NewItemDropdownV2Component,
     ScrollingModule,
     VaultHeaderV2Component,
-    DecryptionFailureDialogComponent,
-    BannerComponent,
     AtRiskPasswordCalloutComponent,
     NewSettingsCalloutComponent,
   ],
@@ -93,9 +84,15 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
   protected remainingCiphers$ = this.vaultPopupItemsService.remainingCiphers$;
   protected allFilters$ = this.vaultPopupListFiltersService.allFilters$;
 
-  protected loading$ = combineLatest([this.vaultPopupItemsService.loading$, this.allFilters$]).pipe(
+  protected loading$ = combineLatest([
+    this.vaultPopupItemsService.loading$,
+    this.allFilters$,
+    // Added as a dependency to avoid flashing the copyActions on slower devices
+    this.vaultCopyButtonsService.showQuickCopyActions$,
+  ]).pipe(
     map(([itemsLoading, filters]) => itemsLoading || !filters),
     shareReplay({ bufferSize: 1, refCount: true }),
+    startWith(true),
   );
 
   protected newItemItemValues$: Observable<NewItemInitialValues> =
@@ -130,8 +127,7 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
     private destroyRef: DestroyRef,
     private cipherService: CipherService,
     private dialogService: DialogService,
-    private vaultProfileService: VaultProfileService,
-    private vaultPageService: VaultPageService,
+    private vaultCopyButtonsService: VaultPopupCopyButtonsService,
   ) {
     combineLatest([
       this.vaultPopupItemsService.emptyVault$,

apps/browser/src/vault/popup/services/vault-popup-copy-buttons.service.ts

@@ -1,5 +1,5 @@
 import { inject, Injectable } from "@angular/core";
-import { map, Observable } from "rxjs";
+import { map, Observable, shareReplay } from "rxjs";
 
 import {
   GlobalStateProvider,
@@ -31,6 +31,7 @@ export class VaultPopupCopyButtonsService {
 
   showQuickCopyActions$: Observable<boolean> = this.displayMode$.pipe(
     map((displayMode) => displayMode === "quick"),
+    shareReplay({ bufferSize: 1, refCount: true }),
   );
 
   async setShowQuickCopyActions(value: boolean) {

apps/web/src/app/vault/components/vault-items/vault-items.stories.ts

@@ -17,7 +17,10 @@ import { AvatarService } from "@bitwarden/common/auth/abstractions/avatar.servic
 import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import {
+  Environment,
+  EnvironmentService,
+} from "@bitwarden/common/platform/abstractions/environment.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
 import { CipherType } from "@bitwarden/common/vault/enums";
@@ -53,6 +56,11 @@ export default {
             getIconsUrl() {
               return "";
             },
+            environment$: new BehaviorSubject({
+              getIconsUrl() {
+                return "";
+              },
+            } as Environment).asObservable(),
           } as Partial<EnvironmentService>,
         },
         {