Edit Skeleton Screen

Name

Also known as (comma separated)

Brief definition Loading placeholder shaped like final content.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "loaded", "type": "toggle", "label": "Content loaded", "default": false }, { "id": "title", "type": "text", "label": "Title", "default": "Weekly digest" }, { "id": "body", "type": "text", "label": "Body", "default": "Three updates since your last visit, summarised below." }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"skl{{#if loaded}} skl--loaded{{/if}}\" role=\"status\" aria-label=\"{{#if loaded}}Content loaded{{/if}}{{#unless loaded}}Content loading{{/unless}}\">\n <div class=\"skl__avatar\" style=\"background:{{accent}};\"></div>\n <div class=\"skl__lines\">\n <span class=\"skl__line skl__line--title\">{{title}}</span>\n <span class=\"skl__line skl__line--body\">{{body}}</span>\n </div>\n</div>\n<style>\n.skl { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; display: flex; gap: 12px; align-items: flex-start; }\n.skl__avatar { width: 40px; height: 40px; border-radius: 50%; background: #24143014; flex-shrink: 0; }\n.skl__lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }\n.skl__line { display: block; height: 12px; border-radius: 4px; background: #24143014; color: transparent; overflow: hidden; }\n.skl__line--title { width: 60%; height: 14px; }\n.skl--loaded .skl__avatar { background: var(--acc, #A8E6C1); }\n.skl--loaded .skl__line { width: auto; height: auto; background: none; color: #241430; font-weight: 400; }\n.skl--loaded .skl__line--title { font-weight: 700; font-size: 14px; }\n.skl--loaded .skl__line--body { font-size: 12px; color: #24143099; }\n@media (prefers-reduced-motion: no-preference) {\n .skl__line, .skl__avatar { background-image: linear-gradient(90deg, #24143014 25%, #24143024 37%, #24143014 63%); background-size: 400% 100%; animation: skl-shimmer 1.4s ease infinite; }\n .skl--loaded .skl__line, .skl--loaded .skl__avatar { animation: none; background-image: none; }\n}\n@keyframes skl-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }\n</style>", "tailwind": "<div class=\"skltw{{#if loaded}} skltw--loaded{{/if}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border flex gap-3 items-start\" role=\"status\" aria-label=\"{{#if loaded}}Content loaded{{/if}}{{#unless loaded}}Content loading{{/unless}}\">\n <div class=\"skltw__avatar w-10 h-10 rounded-full bg-[#24143014] shrink-0\" style=\"--acc:{{accent}};\"></div>\n <div class=\"flex-1 flex flex-col gap-2 pt-1\">\n <span class=\"skltw__line skltw__line--title block h-3.5 w-3/5 rounded bg-[#24143014]\">{{title}}</span>\n <span class=\"skltw__line block h-3 rounded bg-[#24143014]\">{{body}}</span>\n </div>\n</div>\n<style>\n.skltw--loaded .skltw__avatar { background: var(--acc); }\n.skltw--loaded .skltw__line { width: auto; height: auto; background: none; color: #241430; }\n.skltw--loaded .skltw__line--title { font-weight: 700; font-size: 14px; }\n@media (prefers-reduced-motion: no-preference) {\n .skltw__line, .skltw__avatar { background-image: linear-gradient(90deg, #24143014 25%, #24143024 37%, #24143014 63%); background-size: 400% 100%; animation: skltw-shimmer 1.4s ease infinite; }\n .skltw--loaded .skltw__line, .skltw--loaded .skltw__avatar { animation: none; background-image: none; }\n}\n@keyframes skltw-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }\n</style>", "react": "export function SkeletonScreen({\n loaded = {{loaded}},\n title = \"{{title}}\",\n body = \"{{body}}\",\n accent = \"{{accent}}\",\n}) {\n const line = { display: \"block\", borderRadius: 4, background: loaded ? \"none\" : \"#24143014\", color: loaded ? \"#241430\" : \"transparent\", overflow: \"hidden\" };\n return (\n <div role=\"status\" aria-label={loaded ? \"Content loaded\" : \"Content loading\"} style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\", display: \"flex\", gap: 12, alignItems: \"flex-start\" }}>\n <div style={{ width: 40, height: 40, borderRadius: \"50%\", background: loaded ? accent : \"#24143014\", flexShrink: 0 }} />\n <div style={{ flex: 1, display: \"flex\", flexDirection: \"column\", gap: 8, paddingTop: 4 }}>\n <span style={{ ...line, width: loaded ? \"auto\" : \"60%\", height: loaded ? \"auto\" : 14, fontWeight: 700, fontSize: 14 }}>{title}</span>\n <span style={{ ...line, height: loaded ? \"auto\" : 12, fontSize: 12, color: loaded ? \"#24143099\" : \"transparent\" }}>{body}</span>\n </div>\n </div>\n );\n}" }