Loading Without Feedback

html

<div class="lwf-demo" style="--accent:#241430;">
  <span class="lwf-demo__badge">{{unless fixed}}&#10007; Anti-pattern: loading without feedback

tailwind

<div style="width:260px;font-family:system-ui,sans-serif;color:#241430">
  <span class="lwf-tw-badge inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5">{{unless fixed}}&#10007; Anti-pattern: loading without feedback

react

export function LoadingWithoutFeedback({
  label = "Submit order",
  fixed = false,
  loading = true,
  accent = "#241430",
}) {
  return (
    <div style={{ width: 260, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? "#1a7a44" : "#b3261e", color: "#FAF7F2" }}>
        {fixed ? "\u2713 Better" : "\u2717 Anti-pattern: loading without feedback"}
      </span>
      <button type="button" disabled={fixed && loading}
        style={{ border: "none", borderRadius: 8, padding: "10px 20px", background: accent, color: "#FAF7F2", fontWeight: 700, cursor: fixed && loading ? "not-allowed" : "pointer", display: "inline-flex", alignItems: "center", gap: 8, opacity: fixed && loading ? .75 : 1 }}>
        {fixed && loading && <span style={{ width: 13, height: 13, borderRadius: "50%", border: "2px solid #FAF7F255", borderTopColor: "#FAF7F2" }} />}
        {fixed && loading ? "Processing\u2026" : label}
      </button>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430aa" }}>{fixed ? "disabled + spinner + label change \u2014 the user knows it's working" : "button looks exactly the same after the click \u2014 did it work? users click again"}</p>
    </div>
  );
}