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

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

libs/common/src/vault/icon/build-cipher-icon.spec.ts

@@ -89,7 +89,7 @@ describe("buildCipherIcon", () => {
 
       expect(iconDetails).toEqual({
         icon: "bwi-globe",
-        image: undefined,
+        image: null,
         fallbackImage: "",
         imageEnabled: false,
       });
@@ -102,7 +102,7 @@ describe("buildCipherIcon", () => {
 
       expect(iconDetails).toEqual({
         icon: "bwi-globe",
-        image: undefined,
+        image: null,
         fallbackImage: "",
         imageEnabled: true,
       });

libs/common/src/vault/icon/build-cipher-icon.ts

@@ -2,9 +2,23 @@ import { Utils } from "../../platform/misc/utils";
 import { CipherType } from "../enums/cipher-type";
 import { CipherView } from "../models/view/cipher.view";
 
-export function buildCipherIcon(iconsServerUrl: string, cipher: CipherView, showFavicon: boolean) {
-  let icon;
-  let image;
+export interface CipherIconDetails {
+  imageEnabled: boolean;
+  image: string | null;
+  /**
+   * @deprecated Fallback to `icon` instead which will default to "bwi-globe" if no other icon is applicable.
+   */
+  fallbackImage: string;
+  icon: string;
+}
+
+export function buildCipherIcon(
+  iconsServerUrl: string | null,
+  cipher: CipherView,
+  showFavicon: boolean,
+): CipherIconDetails {
+  let icon: string = "bwi-globe";
+  let image: string | null = null;
   let fallbackImage = "";
   const cardIcons: Record<string, string> = {
     Visa: "card-visa",
@@ -18,6 +32,10 @@ export function buildCipherIcon(iconsServerUrl: string, cipher: CipherView, show
     RuPay: "card-ru-pay",
   };
 
+  if (iconsServerUrl == null) {
+    showFavicon = false;
+  }
+
   switch (cipher.type) {
     case CipherType.Login:
       icon = "bwi-globe";
@@ -53,9 +71,7 @@ export function buildCipherIcon(iconsServerUrl: string, cipher: CipherView, show
           try {
             image = `${iconsServerUrl}/${Utils.getHostname(hostnameUri)}/icon.png`;
             fallbackImage = "images/bwi-globe.png";
-            // FIXME: Remove when updating file. Eslint update
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          } catch (e) {
+          } catch {
             // Ignore error since the fallback icon will be shown if image is null.
           }
         }