[CL-95] loading spinner (#16363)

* add spiner from previous branch

* add loading spinner to button

* Add spinner to dialog

* Add spinner to icon button

* add spinner to multi select component

* fix spinner positioning

* Add mock i18n in stories where needed

* round stroke caps. Update classes

* fix ts error

* fix broken tests

* add missing translation keys to stories

* Add mising key for layout

* Add mising key for nav group

* Add mising key for spotlight

* Add mising key for product switcher

* Add mising key for dialog service

* add translation to copy click story

libs/components/src/icon-button/icon-button.component.html

@@ -6,10 +6,6 @@
     class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center"
     [ngClass]="{ 'tw-invisible': !showLoadingStyle() }"
   >
-    <i
-      class="bwi bwi-spinner bwi-spin"
-      aria-hidden="true"
-      [ngClass]="{ 'bwi-lg': size() === 'default' }"
-    ></i>
+    <bit-spinner size="fill" noColor></bit-spinner>
   </span>
 </span>

libs/components/src/icon-button/icon-button.component.ts

@@ -16,6 +16,7 @@ import { AriaDisableDirective } from "../a11y";
 import { setA11yTitleAndAriaLabel } from "../a11y/set-a11y-title-and-aria-label";
 import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
 import { FocusableElement } from "../shared/focusable-element";
+import { SpinnerComponent } from "../spinner";
 import { ariaDisableElement } from "../utils";
 
 export type IconButtonType = "primary" | "danger" | "contrast" | "main" | "muted" | "nav-contrast";
@@ -87,7 +88,7 @@ const sizes: Record<IconButtonSize, string[]> = {
     { provide: ButtonLikeAbstraction, useExisting: BitIconButtonComponent },
     { provide: FocusableElement, useExisting: BitIconButtonComponent },
   ],
-  imports: [NgClass],
+  imports: [NgClass, SpinnerComponent],
   host: {
     /**
      * When the `bitIconButton` input is dynamic from a consumer, Angular doesn't put the

libs/components/src/icon-button/icon-button.stories.ts

@@ -1,12 +1,29 @@
-import { Meta, StoryObj } from "@storybook/angular";
+import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
 import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
+import { I18nMockService } from "../utils";
 
 import { BitIconButtonComponent } from "./icon-button.component";
 
 export default {
   title: "Component Library/Icon Button",
   component: BitIconButtonComponent,
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              loading: "Loading",
+            });
+          },
+        },
+      ],
+    }),
+  ],
   args: {
     bitIconButton: "bwi-plus",
     label: "Your button label here",