more tiny fixes to the lock component and the index loading

apps/web/src/connectors/sso.html

@@ -45,7 +45,7 @@
         <img class="new-logo-themed !tw-w-[200px]" alt="Bitwarden" />
       </a>
       <div class="spinner-container tw-justify-center">
-        <span class="tw-inline-block tw-overflow-hidden tw-flex tw-items-center tw-h-16">
+        <span class="tw-inline-block tw-overflow-hidden tw-items-center tw-h-16">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 56 56"

apps/web/src/connectors/sso.ts

@@ -4,6 +4,7 @@ import { getQsParam } from "./common";
 
 window.addEventListener("load", () => {
   // Debug mode: keep the page static for styling/debugging; don't navigate away.
+  // Visit with https://localhost:8080/sso-connector.html?debug=1
   const debug = getQsParam("debug");
   if (debug === "1") {
     // Keep the page static for styling/debugging; don't navigate away.

apps/web/src/index.html

@@ -21,11 +21,35 @@
           <img class="new-logo-themed !tw-w-[200px]" alt="Bitwarden" />
         </div>
         <div class="spinner-container tw-justify-center">
-          <i
-            class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted"
-            title="Loading"
-            aria-hidden="true"
-          ></i>
+          <span class="tw-inline-block tw-overflow-hidden tw-flex tw-items-center tw-h-16">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 56 56"
+              fill="none"
+              class="tw-size-full tw-animate-spin"
+              aria-hidden="true"
+            >
+              <circle
+                cx="28"
+                cy="28"
+                r="23"
+                class="tw-stroke-primary-600"
+                pathLength="4"
+                stroke-width="5"
+                stroke-dasharray="1 3"
+                stroke-linecap="round"
+              ></circle>
+              <circle
+                cx="28"
+                cy="28"
+                r="23"
+                class="tw-stroke-primary-600"
+                stroke-width="5"
+                opacity="0.4"
+              ></circle>
+            </svg>
+            <span class="tw-sr-only">Loading</span>
+          </span>
         </div>
         <div class="tw-relative tw-grow">
           <div

libs/auth/src/angular/sso/sso.component.html

@@ -1,7 +1,5 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit" class="tw-container">
   <div *ngIf="showLoadingSpinner">
-    <!--    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>-->
-    <!--    {{ "loading" | i18n }}-->
     <bit-spinner />
   </div>
   <div *ngIf="!showLoadingSpinner">

libs/key-management-ui/src/lock/components/lock.component.html

@@ -1,6 +1,6 @@
 <ng-template #spinner>
   <div class="tw-flex tw-items-center tw-justify-center">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+    <bit-spinner />
   </div>
 </ng-template>
 

libs/key-management-ui/src/lock/components/lock.component.ts

@@ -59,6 +59,8 @@ import {
   UserAsymmetricKeysRegenerationService,
 } from "@bitwarden/key-management";
 
+// eslint-disable-next-line no-restricted-imports
+import { SpinnerComponent } from "../../../../components/src/spinner";
 import {
   UnlockOption,
   LockComponentService,
@@ -100,6 +102,7 @@ const AUTOPROMPT_BIOMETRICS_PROCESS_RELOAD_DELAY = 5000;
     AsyncActionsModule,
     IconButtonModule,
     MasterPasswordLockComponent,
+    SpinnerComponent,
   ],
 })
 export class LockComponent implements OnInit, OnDestroy {