Mfa loader (#928)

Display a loader when posture checks are being evaluated to avoid blinking MFA screen.

Author: j-chmielewski

new-ui/src/shared/components/LocationCard/hooks/useMfaConnect.ts

@@ -24,11 +24,25 @@ type MfaErrorResponse = {
 
 type CodeMfaStartMethod = Extract<MfaStartMethod, 0 | 1>;
 
-export const useMfaConnect = (method: CodeMfaStartMethod) => {
+type UseMfaConnectOptions = {
+  debounceMs?: number;
+};
+
+const waitForMinimumDuration = async (startedAt: number, minimumMs: number) => {
+  const remainingMs = Math.max(minimumMs - (performance.now() - startedAt), 0);
+  if (remainingMs === 0) return;
+
+  await new Promise((resolve) => window.setTimeout(resolve, remainingMs));
+};
+
+export const useMfaConnect = (
+  method: CodeMfaStartMethod,
+  { debounceMs = 0 }: UseMfaConnectOptions = {},
+) => {
   const { location, setPostureError, setView } = useLocationCardContext();
 
   const [token, setToken] = useState<string | null>(null);
-  const [isStarting, setIsStarting] = useState(false);
+  const [isStarting, setIsStarting] = useState(debounceMs > 0);
   const [startError, setStartError] = useState<string | null>(null);
   const [isVerifying, setIsVerifying] = useState(false);
   const [verifyError, setVerifyError] = useState<string | null>(null);
@@ -55,7 +69,9 @@ export const useMfaConnect = (method: CodeMfaStartMethod) => {
   // biome-ignore lint/correctness/useExhaustiveDependencies: intentional one-shot trigger via startCalled ref
   useEffect(() => {
     if (!instance || startCalled.current) return;
+
     startCalled.current = true;
+    const startedAt = performance.now();
 
     setIsStarting(true);
 
@@ -66,9 +82,11 @@ export const useMfaConnect = (method: CodeMfaStartMethod) => {
           location,
           method,
         });
+        await waitForMinimumDuration(startedAt, debounceMs);
         setRequestHeaders(headers);
         setToken(response.token);
       } catch (err) {
+        await waitForMinimumDuration(startedAt, debounceMs);
         if (handleMfaStartError({ err, location, setPostureError, setView })) {
           return;
         }

new-ui/src/shared/components/LocationCard/views/LocationCardMfaEmailView/LocationCardMfaEmailView.tsx

@@ -15,11 +15,17 @@ import { LocationViewHeader } from '../../components/LocationViewHeader/Location
 import { useLocationCardContext } from '../../context/context';
 import { LocationCardViews } from '../../context/types';
 import { useMfaConnect } from '../../hooks/useMfaConnect';
+import { LocationCardMfaStartLoader } from '../LocationCardMfaStartLoader/LocationCardMfaStartLoader';
+
+const MIN_POSTURE_LOADER_MS = 500;
 
 export const LocationCardMfaEmailView = () => {
-  const { setView } = useLocationCardContext();
+  const { setView, location } = useLocationCardContext();
   const { verifyCode, isVerifying, verifyError, isStarting, startError } = useMfaConnect(
     MfaStartMethod.Email,
+    {
+      debounceMs: location.posture_check_required ? MIN_POSTURE_LOADER_MS : 0,
+    },
   );
 
   const [emailCode, setEmailCode] = useState<string | null>(null);
@@ -47,6 +53,11 @@ export const LocationCardMfaEmailView = () => {
     if (verifyError) setError(verifyError);
   }, [verifyError]);
 
+  // Show loader when posture is being evaluated
+  const showLoader = location.posture_check_required && isStarting && !startError;
+  if (showLoader) {
+    return <LocationCardMfaStartLoader />;
+  }
   return (
     <div
       className="location-card-mfa-email-view"

new-ui/src/shared/components/LocationCard/views/LocationCardMfaStartLoader/LocationCardMfaStartLoader.tsx

@@ -0,0 +1,14 @@
+import './style.scss';
+import { ThemeSpacing } from '../../../../types';
+import { Divider } from '../../../Divider/Divider';
+import { LoaderSpinner } from '../../../LoaderSpinner/LoaderSpinner';
+
+export const LocationCardMfaStartLoader = () => (
+  <div className="mfa-start-loader">
+    <Divider spacing={ThemeSpacing.Md} />
+    <div className="loader-content">
+      <LoaderSpinner variant="primary" size={32} />
+      <p>Checking device requirements...</p>
+    </div>
+  </div>
+);

new-ui/src/shared/components/LocationCard/views/LocationCardMfaStartLoader/style.scss

@@ -0,0 +1,15 @@
+.mfa-start-loader {
+  > .loader-content {
+    display: flex;
+    min-height: 140px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-md);
+
+    p {
+      font: var(--t-body-xs-500);
+      color: var(--fg-white-70);
+    }
+  }
+}

new-ui/src/shared/components/LocationCard/views/LocationCardMfaTotpView/LocationCardMfaTotpView.tsx

@@ -15,11 +15,17 @@ import { LocationViewHeader } from '../../components/LocationViewHeader/Location
 import { useLocationCardContext } from '../../context/context';
 import { LocationCardViews } from '../../context/types';
 import { useMfaConnect } from '../../hooks/useMfaConnect';
+import { LocationCardMfaStartLoader } from '../LocationCardMfaStartLoader/LocationCardMfaStartLoader';
+
+const MIN_POSTURE_LOADER_MS = 500;
 
 export const LocationCardMfaTotpView = () => {
-  const { setView } = useLocationCardContext();
+  const { setView, location } = useLocationCardContext();
   const { verifyCode, isVerifying, verifyError, isStarting, startError } = useMfaConnect(
     MfaStartMethod.Totp,
+    {
+      debounceMs: location.posture_check_required ? MIN_POSTURE_LOADER_MS : 0,
+    },
   );
 
   const [totpCode, setTotpCode] = useState<string | null>(null);
@@ -47,6 +53,12 @@ export const LocationCardMfaTotpView = () => {
     if (verifyError) setError(verifyError);
   }, [verifyError]);
 
+  // Show loader when posture is being evaluated
+  const showLoader = location.posture_check_required && isStarting && !startError;
+  if (showLoader) {
+    return <LocationCardMfaStartLoader />;
+  }
+
   return (
     <div
       className="location-card-mfa-totp-view"