Component

HUD

A frosted, centered overlay that blocks interaction while a brief async step completes, then morphs from a spinner into a checkmark to confirm.

The primitive

hud.tsx

<NativeHud open={open} variant="loading" label="Loading..." />

A payment's loading state morphs into a success checkmark the moment the charge clears, then dismisses on its own.

hud-example.tsx

<NativeHud
  open={busy}
  variant={status === "success" ? "success" : "loading"}
  label={status === "success" ? "Sent" : "Sending..."}
/>