{
  "_description": "Generated from data/ — edit the sources, not this file. The agent access guide explains the evidence boundary of every field.",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "en",
  "id": "skeleton",
  "name": {
    "zh": "骨架屏",
    "en": "Skeleton Screen"
  },
  "page": "https://designvocabulary.com/en/entries/skeleton/",
  "self": "https://designvocabulary.com/en/entries/skeleton.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/skeleton.json",
    "en": "https://designvocabulary.com/en/entries/skeleton.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 158,
    "index": "https://designvocabulary.com/en/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=en",
    "guide": "https://designvocabulary.com/en/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.requirements",
      "entry.relations",
      "entry.implementationNote",
      "entry.behavior"
    ],
    "scope": "Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.",
    "editorialStatus": "sample-reviewed",
    "specimenData": "fictional",
    "specimenNote": "Original fictional specimens. Definitions cite sources; usage advice and recipes are editorial.",
    "sources": [
      {
        "id": "carbon-loading",
        "url": "https://carbondesignsystem.com/patterns/loading-pattern/",
        "title": "Carbon · Loading patterns",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915165155/https://carbondesignsystem.com/patterns/loading-pattern/",
          "capturedAt": "2026-09-15T16:51:55Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://carbondesignsystem.com/patterns/loading-pattern/"
        }
      }
    ],
    "lists": [
      {
        "id": "M-C",
        "edition": "classic",
        "seat": 1,
        "origin": "editorial-reconstruction",
        "page": "https://designvocabulary.com/en/lists/M-C/",
        "json": "https://designvocabulary.com/en/lists/M-C.json"
      }
    ],
    "ordered": false,
    "listDisclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is."
  },
  "entry": {
    "id": "skeleton",
    "type": "micro",
    "name": {
      "zh": "骨架屏",
      "en": "Skeleton Screen"
    },
    "aliases": [
      "Skeleton Loading",
      "加载占位",
      "骨架加载"
    ],
    "granularity": "state",
    "intents": [
      "wait-for-content"
    ],
    "tags": [
      "loading",
      "unknown progress",
      "placeholder",
      "asynchronous",
      "loading"
    ],
    "definition": "Show placeholder shapes resembling the expected content structure while that content is loading.",
    "boundary": "Placeholder shapes do not indicate a completion percentage or disguise unfetched data as real content.",
    "signature": [
      "Resembles the final content structure",
      "Placeholders rather than fabricated data",
      "Replaced when loading finishes"
    ],
    "when": [
      "The content structure is known but completion progress is unavailable",
      "Space should be reserved for incoming content"
    ],
    "when_not": [
      "The final content structure is entirely unknown",
      "Loading placeholders continue indefinitely after a failure"
    ],
    "tradeoff": "The structure can be previewed, but timeout, error, and retry paths are still needed.",
    "comparison": {
      "focus": "Showing that content is on its way",
      "mechanism": "Structural placeholders",
      "cost": "Does not communicate a completion percentage"
    },
    "sources": [
      {
        "id": "carbon-loading",
        "title": "Carbon · Loading patterns",
        "url": "https://carbondesignsystem.com/patterns/loading-pattern/",
        "claim": "Skeletons are simplified component shapes used for content that has not finished its initial load.",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://carbondesignsystem.com/patterns/loading-pattern/",
          "status": "available",
          "checkedAt": "2026-09-15T16:50:44.269Z",
          "jobId": "spn2-3b0dc711f48ca28755724206ac848b795d3b387d",
          "url": "https://web.archive.org/web/20260915165155/https://carbondesignsystem.com/patterns/loading-pattern/",
          "timestamp": "20260915165155"
        }
      }
    ],
    "relations": [
      {
        "target": "determinate-progress",
        "kind": "alternative",
        "condition": "Choosing waiting feedback",
        "reason": "Consider whether real completed work and the expected content structure are known.",
        "basis": "editorial"
      },
      {
        "target": "calm-technology",
        "kind": "composes_with",
        "condition": "Using static placeholders",
        "reason": "The status remains visible without continually competing for attention.",
        "basis": "editorial"
      }
    ],
    "rules": [
      {
        "when": "Reduced motion is enabled",
        "instruction": "Use static placeholders and keep a text loading status available.",
        "strength": "must",
        "basis": "editorial"
      },
      {
        "when": "Loading fails",
        "instruction": "End the loading state and provide a reason and a retry action.",
        "strength": "must",
        "basis": "editorial"
      }
    ],
    "requirements": [
      {
        "fact": "known_structure",
        "value": true,
        "reason": "The expected content structure must be known for a meaningful placeholder."
      }
    ],
    "behavior": {
      "states": [
        "idle",
        "loading",
        "success",
        "error"
      ],
      "a11y": [
        "Decorative placeholders are hidden from screen readers",
        "The container exposes a busy state and a text message"
      ],
      "motion": "Static placeholders by default"
    },
    "demo": "skeleton",
    "version": "0.1.0",
    "editorialStatus": "sample-reviewed",
    "demoCapabilities": [
      "keyboard",
      "reduced_motion"
    ],
    "implementationNote": "Capability tags describe this specimen only; verify the implementation again in a real product.",
    "searchTerms": [
      "加载",
      "未知进度",
      "占位",
      "异步",
      "loading"
    ]
  }
}