Layout Shift

html

<div class="ls-demo" style="--accent:#BFD9F2;">
  <span class="ls-demo__badge">{{unless fixed}}&#10007; Anti-pattern: layout shift

tailwind

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

react

export function LayoutShift({
  title = "Weekly digest",
  fixed = false,
  loaded = true,
  accent = "#BFD9F2",
}) {
  return (
    <div style={{ width: 300, 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: layout shift"}
      </span>
      <p style={{ margin: "0 0 8px", fontWeight: 700 }}>{title}</p>
      {!fixed && loaded && <div style={{ padding: 20, marginBottom: 8, borderRadius: 8, background: accent, textAlign: "center", fontWeight: 700 }}>Ad</div>}
      {fixed && <div style={{ height: 60, marginBottom: 8, borderRadius: 8, background: accent, display: "grid", placeItems: "center", fontWeight: 700, boxSizing: "border-box" }}>{loaded ? "Ad" : "\u00a0"}</div>}
      <p style={{ margin: 0, color: "#241430cc" }}>Read the full story below the fold.</p>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430aa" }}>{fixed ? "reserved box never changes size \u2014 text never jumps" : "the ad inserts above the text and pushes it down after the click target has already rendered"}</p>
    </div>
  );
}