Loading State Button

export function LoadingButton({ loading, children, ...props }) {
  return (
    <button
      disabled={loading}
      className="inline-flex items-center justify-center gap-2 rounded-lg
        bg-slate-900 px-5 py-2.5 font-medium text-white transition
        disabled:cursor-not-allowed disabled:opacity-70 hover:bg-slate-800"
      {...props}
    >
      {loading && (
        <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
        </svg>
      )}
      {loading ? "Please wait…" : children}
    </button>
  );
}