From e97ff9fed5b24d9abde843a49fec6a9d6324fcc1 Mon Sep 17 00:00:00 2001
From: Patrick Pimentel <ppimentel@bitwarden.com>
Date: Tue, 11 Nov 2025 18:36:44 -0500
Subject: [PATCH] more tiny fixes to the lock component and the index loading

---
 apps/web/src/connectors/sso.html              |  2 +-
 apps/web/src/connectors/sso.ts                |  1 +
 apps/web/src/index.html                       | 34 ++++++++++++++++---
 libs/auth/src/angular/sso/sso.component.html  |  2 --
 .../src/lock/components/lock.component.html   |  2 +-
 .../src/lock/components/lock.component.ts     |  3 ++
 6 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/connectors/sso.html b/apps/web/src/connectors/sso.html
index 8a8e63ce3cf..8f5c3ef1456 100644
--- a/apps/web/src/connectors/sso.html
+++ b/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"
diff --git a/apps/web/src/connectors/sso.ts b/apps/web/src/connectors/sso.ts
index bf707ec51e3..0d054da1fea 100644
--- a/apps/web/src/connectors/sso.ts
+++ b/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.
diff --git a/apps/web/src/index.html b/apps/web/src/index.html
index 06f7587a123..4f8bc320ed2 100644
--- a/apps/web/src/index.html
+++ b/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
diff --git a/libs/auth/src/angular/sso/sso.component.html b/libs/auth/src/angular/sso/sso.component.html
index 7a3f42b1e76..6000edd723b 100644
--- a/libs/auth/src/angular/sso/sso.component.html
+++ b/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">
diff --git a/libs/key-management-ui/src/lock/components/lock.component.html b/libs/key-management-ui/src/lock/components/lock.component.html
index 77f603204b3..ec74e095575 100644
--- a/libs/key-management-ui/src/lock/components/lock.component.html
+++ b/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>
 
diff --git a/libs/key-management-ui/src/lock/components/lock.component.ts b/libs/key-management-ui/src/lock/components/lock.component.ts
index 801a9d191f5..1e7c8249cd7 100644
--- a/libs/key-management-ui/src/lock/components/lock.component.ts
+++ b/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 {