[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/button/button.component.html

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

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

@@ -14,6 +14,7 @@ import { debounce, interval } from "rxjs";
 
 import { AriaDisableDirective } from "../a11y";
 import { ButtonLikeAbstraction, ButtonType, ButtonSize } from "../shared/button-like.abstraction";
+import { SpinnerComponent } from "../spinner";
 import { ariaDisableElement } from "../utils";
 
 const focusRing = [
@@ -60,7 +61,7 @@ const buttonStyles: Record<ButtonType, string[]> = {
   selector: "button[bitButton], a[bitButton]",
   templateUrl: "button.component.html",
   providers: [{ provide: ButtonLikeAbstraction, useExisting: ButtonComponent }],
-  imports: [NgClass],
+  imports: [NgClass, SpinnerComponent],
   hostDirectives: [AriaDisableDirective],
 })
 export class ButtonComponent implements ButtonLikeAbstraction {

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

@@ -1,12 +1,28 @@
-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/i18n-mock.service";
 
 import { ButtonComponent } from "./button.component";
 
 export default {
   title: "Component Library/Button",
   component: ButtonComponent,
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () =>
+            new I18nMockService({
+              loading: "Loading",
+            }),
+        },
+      ],
+    }),
+  ],
   args: {
     disabled: false,
     loading: false,