PM-8113 - TwoFactorAuthWebAuthn - Add loading state for iframe until …

…webauthn ready
bitwarden · Jan 31, 2025 · afad4e0 · afad4e0
1 parent bb54b30
commit afad4e0
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/...or-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.html b/...or-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.html
@@ -1,5 +1,13 @@
 <div id="web-authn-frame" class="tw-mb-3" *ngIf="!webAuthnNewTab">
-  <iframe id="webauthn_iframe" sandbox="allow-scripts allow-same-origin"></iframe>
+  <div *ngIf="!webAuthnReady" class="tw-flex tw-items-center tw-justify-center">
+    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+  </div>
+
+  <iframe
+    id="webauthn_iframe"
+    sandbox="allow-scripts allow-same-origin"
+    [ngClass]="{ 'tw-hidden': !webAuthnReady }"
+  ></iframe>
 </div>
 <ng-container *ngIf="webAuthnNewTab">
   <div class="content text-center" *ngIf="webAuthnNewTab">