Progressive Rendering

Display content as it becomes available.

html

<div class="prg prg--content" role="img" aria-label="Article page progressively rendered, stage: content">
  <p class="prg__title">Article page</p>
  <div class="prg__block prg__block--header" style="background:#BFD9F2;">Header (painted first)</div>
  <div class="prg__block prg__block--content" style="background:#BFD9F2;">Article body (streamed in)</div>
  <div class="prg__block prg__block--comments" style="background:#BFD9F2;">Comments (last)</div>
</div>
<style>
.prg { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.prg__title { margin: 0 0 12px; font-weight: 700; }
.prg__block { height: 34px; border-radius: 8px; margin-bottom: 8px; opacity: .15; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #241430; }
.prg--header .prg__block--header, .prg--content .prg__block--header, .prg--content .prg__block--content, .prg--complete .prg__block { opacity: 1; }
</style>

tailwind

<div class="prgtw prgtw--content font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border" role="img" aria-label="Article page progressively rendered, stage: content">
  <p class="m-0 mb-3 font-bold">Article page</p>
  <div class="prgtw__header h-[34px] rounded-lg mb-2 opacity-[.15] flex items-center justify-center text-[10px] font-bold" style="background:#BFD9F2;">Header (painted first)</div>
  <div class="prgtw__content h-[34px] rounded-lg mb-2 opacity-[.15] flex items-center justify-center text-[10px] font-bold" style="background:#BFD9F2;">Article body (streamed in)</div>
  <div class="prgtw__comments h-[34px] rounded-lg mb-2 opacity-[.15] flex items-center justify-center text-[10px] font-bold" style="background:#BFD9F2;">Comments (last)</div>
</div>
<style>
.prgtw--header .prgtw__header, .prgtw--content .prgtw__header, .prgtw--content .prgtw__content, .prgtw--complete .prgtw__header, .prgtw--complete .prgtw__content, .prgtw--complete .prgtw__comments { opacity: 1; }
</style>

react

export function ProgressiveRendering({
  stage = "content",
  accent = "#BFD9F2",
  showLabels = true,
  pageTitle = "Article page",
}) {
  const shown = { header: stage !== "none", content: stage === "content" || stage === "complete", comments: stage === "complete" };
  const block = (visible, label) => (
    <div style={{ height: 34, borderRadius: 8, marginBottom: 8, opacity: visible ? 1 : .15, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 700, background: accent }}>
      {showLabels && label}
    </div>
  );
  return (
    <div role="img" aria-label={`${pageTitle} progressively rendered, stage: ${stage}`} style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontWeight: 700 }}>{pageTitle}</p>
      {block(shown.header, "Header (painted first)")}
      {block(shown.content, "Article body (streamed in)")}
      {block(shown.comments, "Comments (last)")}
    </div>
  );
}