Edit Pending State

Name

Also known as (comma separated)

Brief definition Operation awaiting completion.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "Processing your request" }, { "id": "stage", "type": "select", "label": "Stage", "default": "queued", "options": [ "queued", "processing", "finalizing" ] }, { "id": "eta", "type": "text", "label": "ETA", "default": "about 30 seconds" }, { "id": "showSpinner", "type": "toggle", "label": "Show spinner", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"pending\" role=\"status\" aria-live=\"polite\">\n {{#if showSpinner}}<span class=\"pending__spinner\" aria-hidden=\"true\"></span>{{/if}}\n <div class=\"pending__body\">\n <p class=\"pending__label\">{{label}}</p>\n <p class=\"pending__stage\">{{stage}} · ETA {{eta}}</p>\n </div>\n</div>\n<style>\n.pending { display: flex; align-items: center; gap: 12px; max-width: 320px; padding: 12px 16px; box-sizing: border-box;\n border-radius: 10px; background: #FAF7F2; border: 1px solid #24143022; font: 13.5px/1.4 system-ui, sans-serif; color: #241430; }\n.pending__spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #24143022; border-top-color: #8A6FBF;\n flex-shrink: 0; }\n@keyframes pending-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: no-preference) {\n .pending__spinner { animation: pending-spin .2s linear infinite; }\n}\n.pending__label { margin: 0; font-weight: 700; }\n.pending__stage { margin: 2px 0 0; text-transform: capitalize; color: #241430b3; }\n</style>", "tailwind": "<div role=\"status\" aria-live=\"polite\" class=\"pending-tw flex items-center gap-3 max-w-xs px-4 py-3 box-border rounded-lg bg-[#FAF7F2] border border-[#24143022] font-sans text-[13.5px] text-[#241430]\">\n {{#if showSpinner}}<span aria-hidden=\"true\" class=\"pending-tw__spinner w-5 h-5 rounded-full flex-shrink-0 border-[2.5px] border-[#24143022]\" style=\"border-top-color:#8A6FBF\"></span>{{/if}}\n <div>\n <p class=\"m-0 font-bold\">{{label}}</p>\n <p class=\"mt-0.5 mb-0 capitalize text-[#241430]/70\">{{stage}} · ETA {{eta}}</p>\n </div>\n</div>\n<style>\n@keyframes pending-tw-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: no-preference) {\n .pending-tw__spinner { animation: pending-tw-spin .2s linear infinite; }\n}\n</style>", "react": "export function PendingState({\n label = \"{{label}}\",\n stage = \"{{stage}}\",\n eta = \"{{eta}}\",\n showSpinner = {{showSpinner}},\n}) {\n return (\n <div role=\"status\" aria-live=\"polite\" style={{ display: \"flex\", alignItems: \"center\", gap: 12, maxWidth: 320,\n padding: \"12px 16px\", boxSizing: \"border-box\", borderRadius: 10, background: \"#FAF7F2\",\n border: \"1px solid #24143022\", font: \"13.5px/1.4 system-ui, sans-serif\", color: \"#241430\" }}>\n {showSpinner && (\n <span aria-hidden=\"true\" className=\"pending-spinner\" style={{ width: 20, height: 20, borderRadius: \"50%\", border: \"2.5px solid #24143022\",\n borderTopColor: \"#8A6FBF\", flexShrink: 0 }} />\n )}\n <div>\n <p style={{ margin: 0, fontWeight: 700 }}>{label}</p>\n <p style={{ margin: \"2px 0 0\", textTransform: \"capitalize\", color: \"#241430b3\" }}>{stage} · ETA {eta}</p>\n </div>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .pending-spinner { animation: pending-react-spin .8s linear infinite; }\n @keyframes pending-react-spin { to { transform: rotate(360deg); } }\n }\n `}</style>\n </div>\n );\n}" }