Edit Progressive Rendering

Name

Also known as (comma separated)

Brief definition Display content as it becomes available.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "stage", "type": "select", "label": "Stage", "default": "content", "options": [ "header", "content", "complete" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showLabels", "type": "toggle", "label": "Show stage labels", "default": true }, { "id": "pageTitle", "type": "text", "label": "Page", "default": "Article page" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"prg prg--{{stage}}\" role=\"img\" aria-label=\"{{pageTitle}} progressively rendered, stage: {{stage}}\">\n <p class=\"prg__title\">{{pageTitle}}</p>\n <div class=\"prg__block prg__block--header\" style=\"background:{{accent}};\">{{#if showLabels}}Header (painted first){{/if}}</div>\n <div class=\"prg__block prg__block--content\" style=\"background:{{accent}};\">{{#if showLabels}}Article body (streamed in){{/if}}</div>\n <div class=\"prg__block prg__block--comments\" style=\"background:{{accent}};\">{{#if showLabels}}Comments (last){{/if}}</div>\n</div>\n<style>\n.prg { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.prg__title { margin: 0 0 12px; font-weight: 700; }\n.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; }\n.prg--header .prg__block--header, .prg--content .prg__block--header, .prg--content .prg__block--content, .prg--complete .prg__block { opacity: 1; }\n</style>", "tailwind": "<div class=\"prgtw prgtw--{{stage}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\" role=\"img\" aria-label=\"{{pageTitle}} progressively rendered, stage: {{stage}}\">\n <p class=\"m-0 mb-3 font-bold\">{{pageTitle}}</p>\n <div class=\"prgtw__header h-[34px] rounded-lg mb-2 opacity-[.15] flex items-center justify-center text-[10px] font-bold\" style=\"background:{{accent}};\">{{#if showLabels}}Header (painted first){{/if}}</div>\n <div class=\"prgtw__content h-[34px] rounded-lg mb-2 opacity-[.15] flex items-center justify-center text-[10px] font-bold\" style=\"background:{{accent}};\">{{#if showLabels}}Article body (streamed in){{/if}}</div>\n <div class=\"prgtw__comments h-[34px] rounded-lg mb-2 opacity-[.15] flex items-center justify-center text-[10px] font-bold\" style=\"background:{{accent}};\">{{#if showLabels}}Comments (last){{/if}}</div>\n</div>\n<style>\n.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; }\n</style>", "react": "export function ProgressiveRendering({\n stage = \"{{stage}}\",\n accent = \"{{accent}}\",\n showLabels = {{showLabels}},\n pageTitle = \"{{pageTitle}}\",\n}) {\n const shown = { header: stage !== \"none\", content: stage === \"content\" || stage === \"complete\", comments: stage === \"complete\" };\n const block = (visible, label) => (\n <div style={{ height: 34, borderRadius: 8, marginBottom: 8, opacity: visible ? 1 : .15, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontSize: 10, fontWeight: 700, background: accent }}>\n {showLabels && label}\n </div>\n );\n return (\n <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\" }}>\n <p style={{ margin: \"0 0 12px\", fontWeight: 700 }}>{pageTitle}</p>\n {block(shown.header, \"Header (painted first)\")}\n {block(shown.content, \"Article body (streamed in)\")}\n {block(shown.comments, \"Comments (last)\")}\n </div>\n );\n}" }