{
  "name": "loading-skeleton-placeholder",
  "kind": "block",
  "primary": "section",
  "page": "/catalog/ui-patterns/app/loading-skeleton-placeholder/loading-skeleton-placeholder.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<section>\n  <col-ui gap=\"4\">\n    <card-ui>\n      <header>\n        <skeleton-ui slot=\"icon\" width=\"40px\" height=\"40px\" radius=\"full\"></skeleton-ui>\n        <span slot=\"heading\"><skeleton-ui width=\"55%\" height=\"1em\"></skeleton-ui></span>\n        <span slot=\"description\"><skeleton-ui width=\"35%\" height=\"0.8em\"></skeleton-ui></span>\n      </header>\n      <section>\n        <col-ui gap=\"3\">\n          <skeleton-ui width=\"100%\" height=\"1em\"></skeleton-ui>\n          <skeleton-ui width=\"92%\" height=\"1em\"></skeleton-ui>\n          <skeleton-ui width=\"78%\" height=\"1em\"></skeleton-ui>\n        </col-ui>\n      </section>\n      <footer>\n        <row-ui gap=\"2\">\n          <skeleton-ui width=\"80px\" height=\"2em\" radius=\"md\"></skeleton-ui>\n          <skeleton-ui width=\"80px\" height=\"2em\" radius=\"md\"></skeleton-ui>\n        </row-ui>\n      </footer>\n    </card-ui>\n\n    <list-ui divider>\n      <list-item-ui>\n        <row-ui gap=\"3\" align=\"center\">\n          <skeleton-ui width=\"36px\" height=\"36px\" radius=\"full\"></skeleton-ui>\n          <col-ui gap=\"2\" style=\"flex:1\">\n            <skeleton-ui width=\"48%\" height=\"0.9em\"></skeleton-ui>\n            <skeleton-ui width=\"30%\" height=\"0.75em\"></skeleton-ui>\n          </col-ui>\n          <skeleton-ui width=\"60px\" height=\"1.5em\" radius=\"md\"></skeleton-ui>\n        </row-ui>\n      </list-item-ui>\n      <list-item-ui>\n        <row-ui gap=\"3\" align=\"center\">\n          <skeleton-ui width=\"36px\" height=\"36px\" radius=\"full\"></skeleton-ui>\n          <col-ui gap=\"2\" style=\"flex:1\">\n            <skeleton-ui width=\"62%\" height=\"0.9em\"></skeleton-ui>\n            <skeleton-ui width=\"40%\" height=\"0.75em\"></skeleton-ui>\n          </col-ui>\n          <skeleton-ui width=\"60px\" height=\"1.5em\" radius=\"md\"></skeleton-ui>\n        </row-ui>\n      </list-item-ui>\n      <list-item-ui>\n        <row-ui gap=\"3\" align=\"center\">\n          <skeleton-ui width=\"36px\" height=\"36px\" radius=\"full\"></skeleton-ui>\n          <col-ui gap=\"2\" style=\"flex:1\">\n            <skeleton-ui width=\"52%\" height=\"0.9em\"></skeleton-ui>\n            <skeleton-ui width=\"25%\" height=\"0.75em\"></skeleton-ui>\n          </col-ui>\n          <skeleton-ui width=\"60px\" height=\"1.5em\" radius=\"md\"></skeleton-ui>\n        </row-ui>\n      </list-item-ui>\n    </list-ui>\n  </col-ui>\n</section>",
  "source": "catalog/ui-patterns/app/loading-skeleton-placeholder/loading-skeleton-placeholder.contents.html",
  "metadata": {
    "domain": "agent",
    "description": "Loading skeleton placeholder — animated skeleton-ui elements showing content placeholders while data loads. Avatar + text line skeletons in a list layout.",
    "keywords": [
      "loading",
      "skeleton",
      "placeholder",
      "skeleton-ui",
      "loading",
      "state",
      "shimmer",
      "pulse",
      "animation",
      "content",
      "placeholder",
      "list",
      "rows"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "skeleton",
      "component": "Skeleton",
      "slot": "icon",
      "height": "40px",
      "radius": "full",
      "width": "40px"
    },
    {
      "id": "skeleton-2",
      "component": "Skeleton",
      "height": "1em",
      "width": "55%"
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "body",
      "slot": "heading",
      "children": [
        "skeleton-2"
      ]
    },
    {
      "id": "skeleton-3",
      "component": "Skeleton",
      "height": "0.8em",
      "width": "35%"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "children": [
        "skeleton-3"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "skeleton",
        "text",
        "text-2"
      ]
    },
    {
      "id": "skeleton-4",
      "component": "Skeleton",
      "height": "1em",
      "width": "100%"
    },
    {
      "id": "skeleton-5",
      "component": "Skeleton",
      "height": "1em",
      "width": "92%"
    },
    {
      "id": "skeleton-6",
      "component": "Skeleton",
      "height": "1em",
      "width": "78%"
    },
    {
      "id": "column-2",
      "component": "Column",
      "gap": "3",
      "children": [
        "skeleton-4",
        "skeleton-5",
        "skeleton-6"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "skeleton-7",
      "component": "Skeleton",
      "height": "2em",
      "radius": "md",
      "width": "80px"
    },
    {
      "id": "skeleton-8",
      "component": "Skeleton",
      "height": "2em",
      "radius": "md",
      "width": "80px"
    },
    {
      "id": "row",
      "component": "Row",
      "gap": "2",
      "children": [
        "skeleton-7",
        "skeleton-8"
      ]
    },
    {
      "id": "footer",
      "component": "Footer",
      "children": [
        "row"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section",
        "footer"
      ]
    },
    {
      "id": "skeleton-9",
      "component": "Skeleton",
      "height": "36px",
      "radius": "full",
      "width": "36px"
    },
    {
      "id": "skeleton-10",
      "component": "Skeleton",
      "height": "0.9em",
      "width": "48%"
    },
    {
      "id": "skeleton-11",
      "component": "Skeleton",
      "height": "0.75em",
      "width": "30%"
    },
    {
      "id": "column-3",
      "component": "Column",
      "gap": "2",
      "children": [
        "skeleton-10",
        "skeleton-11"
      ]
    },
    {
      "id": "skeleton-12",
      "component": "Skeleton",
      "height": "1.5em",
      "radius": "md",
      "width": "60px"
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "center",
      "gap": "3",
      "children": [
        "skeleton-9",
        "column-3",
        "skeleton-12"
      ]
    },
    {
      "id": "list-item",
      "component": "ListItem",
      "children": [
        "row-2"
      ]
    },
    {
      "id": "skeleton-13",
      "component": "Skeleton",
      "height": "36px",
      "radius": "full",
      "width": "36px"
    },
    {
      "id": "skeleton-14",
      "component": "Skeleton",
      "height": "0.9em",
      "width": "62%"
    },
    {
      "id": "skeleton-15",
      "component": "Skeleton",
      "height": "0.75em",
      "width": "40%"
    },
    {
      "id": "column-4",
      "component": "Column",
      "gap": "2",
      "children": [
        "skeleton-14",
        "skeleton-15"
      ]
    },
    {
      "id": "skeleton-16",
      "component": "Skeleton",
      "height": "1.5em",
      "radius": "md",
      "width": "60px"
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "center",
      "gap": "3",
      "children": [
        "skeleton-13",
        "column-4",
        "skeleton-16"
      ]
    },
    {
      "id": "list-item-2",
      "component": "ListItem",
      "children": [
        "row-3"
      ]
    },
    {
      "id": "skeleton-17",
      "component": "Skeleton",
      "height": "36px",
      "radius": "full",
      "width": "36px"
    },
    {
      "id": "skeleton-18",
      "component": "Skeleton",
      "height": "0.9em",
      "width": "52%"
    },
    {
      "id": "skeleton-19",
      "component": "Skeleton",
      "height": "0.75em",
      "width": "25%"
    },
    {
      "id": "column-5",
      "component": "Column",
      "gap": "2",
      "children": [
        "skeleton-18",
        "skeleton-19"
      ]
    },
    {
      "id": "skeleton-20",
      "component": "Skeleton",
      "height": "1.5em",
      "radius": "md",
      "width": "60px"
    },
    {
      "id": "row-4",
      "component": "Row",
      "align": "center",
      "gap": "3",
      "children": [
        "skeleton-17",
        "column-5",
        "skeleton-20"
      ]
    },
    {
      "id": "list-item-3",
      "component": "ListItem",
      "children": [
        "row-4"
      ]
    },
    {
      "id": "list",
      "component": "List",
      "divider": true,
      "children": [
        "list-item",
        "list-item-2",
        "list-item-3"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "4",
      "children": [
        "card",
        "list"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "children": [
        "column"
      ]
    }
  ]
}