{
  "tag": "ed-skeleton",
  "kind": "component",
  "summary": "Skeletons are used to provide a visual representation of where content will eventually be drawn.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/skeleton/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/skeleton/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [],
  "use": [
    "Content being fetched for content-rich views — feeds, dashboards, search results, lists, cards, and detail pages",
    "Medium-length waits (roughly 1–10 seconds) where showing the coming structure reassures the user that progress is happening"
  ],
  "notFor": [
    {
      "when": "A very short wait where content appears almost instantly — the flash is more distracting than helpful",
      "instead": "no placeholder at all"
    },
    {
      "when": "Showing how far along a determinate task is when a known percentage exists",
      "instead": "a [Progress Bar](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/progress-bar) or [Progress Ring](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/progress-ring)"
    },
    {
      "when": "A task or process the user triggered — saving, submitting, uploading, downloading, converting — rather than content being fetched to explore",
      "instead": "a [Progress Ring](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/progress-ring) or [Progress Bar](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/progress-bar)"
    },
    {
      "when": "A state that has no data and will stay empty — the placeholder implies content is coming when it never will",
      "instead": "an [Empty State](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/empty-state)"
    }
  ],
  "rules": [
    {
      "id": "skeleton/mirror-layout",
      "rule": "Arrange several skeletons to mirror the real layout that is coming: match the position, size, and count of the headings, text lines, images, and avatars that will replace them. Keep each placeholder simple — hint at the shape of the content, not every pixel of it — and never build a generic grey frame that bears no resemblance to the real layout.",
      "why": "A skeleton is only useful when it represents the real layout that is coming. A generic frame that gives no hint of the content hierarchy is just a more elaborate spinner — it adds motion but no meaning."
    },
    {
      "id": "skeleton/subtle-motion",
      "rule": "Keep any animation subtle, and prefer a calm effect over a static block only when the wait is long enough to benefit from a sign of activity. Never animate heavily or use many moving skeletons at once.",
      "why": "Extensive motion is distracting and can be unsettling."
    },
    {
      "id": "skeleton/reserve-space",
      "rule": "Reserve the same space the real content will occupy, and swap the skeleton for the real content in the same positions, so the layout does not shift and nothing jumps when content arrives."
    },
    {
      "id": "skeleton/display-duration",
      "rule": "Keep the skeleton on screen just long enough to be perceived — and never indefinitely: when loading stalls or fails, show an error with a Retry action instead of an endless placeholder."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "effect",
        "property": "effect",
        "type": "'none' | 'pulse' | 'sheen'",
        "default": "'none'",
        "description": "Determines which effect the skeleton will use."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [],
    "events": [],
    "slots": [],
    "cssProperties": [
      {
        "name": "--ed-skeleton-color",
        "description": "The color of the skeleton."
      },
      {
        "name": "--ed-skeleton-sheen-color",
        "description": "The sheen color when the skeleton is in its loading state."
      }
    ],
    "parts": [
      {
        "name": "indicator",
        "description": "The skeleton's indicator which is responsible for its color and animation."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/skeleton/skeleton.js';",
  "react": {
    "component": "EdSkeleton",
    "import": "import EdSkeleton from '@eurodata/eurodata-ui/dist/react/skeleton/index.js';"
  }
}