Edit Loading State

Name

Also known as (comma separated)

Brief definition State representing an active operation.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "contentLabel", "type": "text", "label": "Content", "default": "Profile" }, { "id": "stage", "type": "select", "label": "State", "default": "loading", "options": [ "idle", "loading", "loaded", "error" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showSpinner", "type": "toggle", "label": "Show spinner while loading", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"lst lst--{{stage}}\" role=\"status\" aria-label=\"{{contentLabel}} is {{stage}}\">\n <p class=\"lst__panel lst__panel--idle\">Not requested yet</p>\n <p class=\"lst__panel lst__panel--loading\">{{#if showSpinner}}<span class=\"lst__spin\" style=\"border-top-color:{{accent}};\"></span>{{/if}}Loading {{contentLabel}}&hellip;</p>\n <p class=\"lst__panel lst__panel--loaded\" style=\"color:{{accent}};\">{{contentLabel}} loaded</p>\n <p class=\"lst__panel lst__panel--error\">Failed to load {{contentLabel}}</p>\n</div>\n<style>\n.lst { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.lst__panel { display: none; margin: 0; font-weight: 600; align-items: center; gap: 8px; }\n.lst--idle .lst__panel--idle, .lst--loading .lst__panel--loading, .lst--loaded .lst__panel--loaded, .lst--error .lst__panel--error { display: flex; }\n.lst--idle .lst__panel--idle { color: #24143080; font-weight: 400; }\n.lst--error .lst__panel--error { color: #E8A020; }\n.lst__spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #24143020; display: inline-block; }\n@media (prefers-reduced-motion: no-preference) {\n .lst__spin { animation: lst-spin .8s linear infinite; }\n}\n@keyframes lst-spin { to { transform: rotate(360deg); } }\n</style>", "tailwind": "<div class=\"lsttw lsttw--{{stage}} font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border\" role=\"status\" aria-label=\"{{contentLabel}} is {{stage}}\">\n <p class=\"lsttw__panel lsttw__panel--idle hidden m-0 items-center gap-2 text-[#24143080] font-normal\">Not requested yet</p>\n <p class=\"lsttw__panel lsttw__panel--loading hidden m-0 items-center gap-2 font-semibold\">{{#if showSpinner}}<span class=\"lsttw__spin w-3.5 h-3.5 rounded-full border-2 border-[#24143020] inline-block\" style=\"border-top-color:{{accent}};\"></span>{{/if}}Loading {{contentLabel}}&hellip;</p>\n <p class=\"lsttw__panel lsttw__panel--loaded hidden m-0 items-center gap-2 font-semibold\" style=\"color:{{accent}};\">{{contentLabel}} loaded</p>\n <p class=\"lsttw__panel lsttw__panel--error hidden m-0 items-center gap-2 font-semibold text-[#E8A020]\">Failed to load {{contentLabel}}</p>\n</div>\n<style>\n.lsttw--idle .lsttw__panel--idle, .lsttw--loading .lsttw__panel--loading, .lsttw--loaded .lsttw__panel--loaded, .lsttw--error .lsttw__panel--error { display: flex; }\n@media (prefers-reduced-motion: no-preference) {\n .lsttw__spin { animation: lsttw-spin .8s linear infinite; }\n}\n@keyframes lsttw-spin { to { transform: rotate(360deg); } }\n</style>", "react": "export function LoadingState({\n contentLabel = \"{{contentLabel}}\",\n stage = \"{{stage}}\",\n accent = \"{{accent}}\",\n showSpinner = {{showSpinner}},\n}) {\n return (\n <div role=\"status\" aria-label={`${contentLabel} is ${stage}`} style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 280, boxSizing: \"border-box\" }}>\n {stage === \"idle\" && <p style={{ margin: 0, color: \"#24143080\" }}>Not requested yet</p>}\n {stage === \"loading\" && (\n <p style={{ margin: 0, display: \"flex\", alignItems: \"center\", gap: 8, fontWeight: 600 }}>\n {showSpinner && <span style={{ width: 14, height: 14, borderRadius: \"50%\", border: \"2px solid #24143020\", borderTopColor: accent, display: \"inline-block\" }} />}\n Loading {contentLabel}&hellip;\n </p>\n )}\n {stage === \"loaded\" && <p style={{ margin: 0, fontWeight: 600, color: accent }}>{contentLabel} loaded</p>}\n {stage === \"error\" && <p style={{ margin: 0, fontWeight: 600, color: \"#E8A020\" }}>Failed to load {contentLabel}</p>}\n </div>\n );\n}" }