@commercetools/nimbus-mcp 3.2.0 → 3.4.0

package/data/docs/routes/components-feedback-skeleton.json

@@ -0,0 +1,481 @@
+{
+  "meta": {
+    "id": "Components-Skeleton",
+    "title": "Skeleton",
+    "exportName": "Skeleton",
+    "description": "A loading placeholder that holds space for content while it loads, reducing perceived layout shift.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/skeleton/skeleton.mdx",
+    "menu": [
+      "Components",
+      "Feedback",
+      "Skeleton"
+    ],
+    "route": "components/feedback/skeleton",
+    "tags": [
+      "component",
+      "skeleton",
+      "loading",
+      "placeholder",
+      "feedback"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Variables",
+        "href": "#variables",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Animation",
+        "href": "#animation",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Shape",
+        "href": "#shape",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Sizing",
+        "href": "#sizing",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Composing a layout",
+        "href": "#composing-a-layout",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Guidelines",
+        "href": "#guidelines",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Best practices",
+        "href": "#best-practices",
+        "depth": 3,
+        "numbering": [
+          1,
+          3,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "When to use",
+        "href": "#when-to-use",
+        "depth": 3,
+        "numbering": [
+          1,
+          3,
+          2
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\n`Skeleton` is the base loading placeholder — a single, sizeable block that holds\nspace for content while it loads. It reduces layout shift and communicates that\nthe interface is active, giving users confidence the page hasn't frozen. Unlike\na spinner, a skeleton mirrors the shape of the content that will appear, so the\ntransition from loading to loaded feels smooth and intentional.\n\nTwo convenience components are built on top of it for the most common shapes:\n\n- **[SkeletonText](/components/feedback/skeletontext)** — a stack of narrowing\n  lines that approximates a paragraph of text\n- **[SkeletonCircle](/components/feedback/skeletoncircle)** — a circular\n  placeholder sized to the Avatar scale, for avatars and icons\n\nUse `Skeleton` directly for images, headings, buttons, cards, or any custom\nrectangular or circular shape.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system)\n\n## Variables\n\nGet familiar with the features.\n\n### Animation\n\nThree animation variants signal loading activity with different levels of\nenergy. Use `pulse` (a gentle opacity oscillation) for most loading states,\n`wave` (a gradient shimmer sweep) for data-heavy surfaces like dashboards, and\n`none` when motion would distract from other activity on the page.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" width=\"300px\">\n    <Skeleton height=\"40px\" animation=\"pulse\" />\n    <Skeleton height=\"40px\" animation=\"wave\" />\n    <Skeleton height=\"40px\" animation=\"none\" />\n  </Stack>\n)\n```\n\n### Shape\n\n`rectangle` (the default) applies a small border radius — use it for text lines,\nimages, cards, and buttons. `circle` forces a 1:1 aspect ratio — use it for\navatars, user icons, and circular thumbnails.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"center\">\n    <Skeleton width=\"200px\" height=\"48px\" shape=\"rectangle\" />\n    <Skeleton width=\"60px\" height=\"60px\" shape=\"circle\" />\n  </Stack>\n)\n```\n\n### Sizing\n\n`Skeleton` has no dedicated size prop — it stretches to the `width` and `height`\n(or any Chakra style props) you give it, so it can stand in for content of any\ndimension.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\">\n    <Skeleton width=\"120px\" height=\"16px\" />\n    <Skeleton width=\"240px\" height=\"32px\" />\n    <Skeleton width=\"100%\" height=\"120px\" />\n  </Stack>\n)\n```\n\n### Composing a layout\n\nCombine `Skeleton` with `SkeletonCircle` and `SkeletonText` to match the shape\nof the real content as closely as possible.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"flex-start\">\n    <SkeletonCircle size=\"md\" />\n    <Stack gap=\"200\">\n      <SkeletonText textStyle=\"lg\" lines={1} width=\"180px\" />\n      <SkeletonText lines={2} width=\"240px\" />\n    </Stack>\n  </Stack>\n)\n```\n\n## Guidelines\n\n### Best practices\n\n- Mirror the real content's shape as closely as possible. The closer the\n  skeleton matches the loaded layout, the smoother the transition feels.\n- Reach for `SkeletonText` for paragraphs and `SkeletonCircle` for avatars; use\n  the base `Skeleton` for individual lines, headings, images, and custom shapes.\n- Keep skeletons on screen only while loading. Swap them for real content as\n  soon as data is available.\n\n### When to use\n\n> [!TIP]\\\n> Use Skeleton when:\n- Content takes more than ~300 ms to load and has a predictable shape\n- You want to reduce perceived layout shift during initial page load or lazy\n  loading\n- The loading region contains multiple elements (cards, lists, detail panels)\n\n> [!CAUTION]\\\n> When NOT to use Skeleton:\n- For operations with a known duration — use a `LoadingSpinner` with a progress\n  indicator instead\n- For very short loading times (under ~300 ms) — a flash of skeleton can be\n  more jarring than no placeholder at all\n- For content whose shape is unknown — an indeterminate spinner is a better fit\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\n`Skeleton` is the base loading placeholder — a single, sizeable block that holds\nspace for content while it loads. It reduces layout shift and communicates that\nthe interface is active, giving users confidence the page hasn't frozen. Unlike\na spinner, a skeleton mirrors the shape of the content that will appear, so the\ntransition from loading to loaded feels smooth and intentional.\n\nTwo convenience components are built on top of it for the most common shapes:\n\n- **[SkeletonText](/components/feedback/skeletontext)** — a stack of narrowing\n  lines that approximates a paragraph of text\n- **[SkeletonCircle](/components/feedback/skeletoncircle)** — a circular\n  placeholder sized to the Avatar scale, for avatars and icons\n\nUse `Skeleton` directly for images, headings, buttons, cards, or any custom\nrectangular or circular shape.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system)\n\n## Variables\n\nGet familiar with the features.\n\n### Animation\n\nThree animation variants signal loading activity with different levels of\nenergy. Use `pulse` (a gentle opacity oscillation) for most loading states,\n`wave` (a gradient shimmer sweep) for data-heavy surfaces like dashboards, and\n`none` when motion would distract from other activity on the page.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" width=\"300px\">\n    <Skeleton height=\"40px\" animation=\"pulse\" />\n    <Skeleton height=\"40px\" animation=\"wave\" />\n    <Skeleton height=\"40px\" animation=\"none\" />\n  </Stack>\n)\n```\n\n### Shape\n\n`rectangle` (the default) applies a small border radius — use it for text lines,\nimages, cards, and buttons. `circle` forces a 1:1 aspect ratio — use it for\navatars, user icons, and circular thumbnails.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"center\">\n    <Skeleton width=\"200px\" height=\"48px\" shape=\"rectangle\" />\n    <Skeleton width=\"60px\" height=\"60px\" shape=\"circle\" />\n  </Stack>\n)\n```\n\n### Sizing\n\n`Skeleton` has no dedicated size prop — it stretches to the `width` and `height`\n(or any Chakra style props) you give it, so it can stand in for content of any\ndimension.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\">\n    <Skeleton width=\"120px\" height=\"16px\" />\n    <Skeleton width=\"240px\" height=\"32px\" />\n    <Skeleton width=\"100%\" height=\"120px\" />\n  </Stack>\n)\n```\n\n### Composing a layout\n\nCombine `Skeleton` with `SkeletonCircle` and `SkeletonText` to match the shape\nof the real content as closely as possible.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"flex-start\">\n    <SkeletonCircle size=\"md\" />\n    <Stack gap=\"200\">\n      <SkeletonText textStyle=\"lg\" lines={1} width=\"180px\" />\n      <SkeletonText lines={2} width=\"240px\" />\n    </Stack>\n  </Stack>\n)\n```\n\n## Guidelines\n\n### Best practices\n\n- Mirror the real content's shape as closely as possible. The closer the\n  skeleton matches the loaded layout, the smoother the transition feels.\n- Reach for `SkeletonText` for paragraphs and `SkeletonCircle` for avatars; use\n  the base `Skeleton` for individual lines, headings, images, and custom shapes.\n- Keep skeletons on screen only while loading. Swap them for real content as\n  soon as data is available.\n\n### When to use\n\n> [!TIP]\\\n> Use Skeleton when:\n- Content takes more than ~300 ms to load and has a predictable shape\n- You want to reduce perceived layout shift during initial page load or lazy\n  loading\n- The loading region contains multiple elements (cards, lists, detail panels)\n\n> [!CAUTION]\\\n> When NOT to use Skeleton:\n- For operations with a known duration — use a `LoadingSpinner` with a progress\n  indicator instead\n- For very short loading times (under ~300 ms) — a flash of skeleton can be\n  more jarring than no placeholder at all\n- For content whose shape is unknown — an indeterminate spinner is a better fit\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Variables",
+          "href": "#variables",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Animation",
+          "href": "#animation",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Shape",
+          "href": "#shape",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Sizing",
+          "href": "#sizing",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Composing a layout",
+          "href": "#composing-a-layout",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "When to use",
+          "href": "#when-to-use",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { Skeleton, type SkeletonProps } from '@commercetools/nimbus';\n```\n\nFor paragraph and circular placeholders, see\n[SkeletonText](/components/feedback/skeletontext) and\n[SkeletonCircle](/components/feedback/skeletoncircle) — both are built on\n`Skeleton`.\n\n### Basic usage\n\n`Skeleton` renders a muted, animated block that holds space for content while it\nloads. Give it a `width` and `height` (or any Chakra style props) to match the\ncontent it stands in for.\n\n```jsx live-dev\nconst App = () => (\n  <Skeleton width=\"200px\" height=\"40px\" />\n)\n```\n\n## Usage examples\n\n### Conditional rendering (standalone pattern)\n\nSkeleton does **not** have an `isLoaded` prop. Instead, render the skeleton\nduring loading and swap it for real content using conditional rendering. This\nkeeps loading-state management in your own code, separate from the styling\ncomponent.\n\n```jsx live-dev\nconst App = () => {\n  const [isLoading, setIsLoading] = React.useState(true);\n\n  return (\n    <Stack gap=\"400\">\n      <Button onPress={() => setIsLoading(v => !v)}>Toggle loading</Button>\n      <div aria-busy={isLoading}>\n        {isLoading ? (\n          <Skeleton width=\"300px\" height=\"80px\" />\n        ) : (\n          <Stack\n            width=\"300px\"\n            height=\"80px\"\n            backgroundColor=\"neutral.2\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n          >\n            Content loaded\n          </Stack>\n        )}\n      </div>\n    </Stack>\n  )\n}\n```\n\n### Animation variants\n\nThe `animation` prop controls how the placeholder animates while loading.\n\n- `pulse` (default): opacity oscillation\n- `wave`: gradient shimmer sweep via an `::after` pseudo-element\n- `none`: no animation\n\n```jsx live-dev\nconst App = () => (\n  <Stack gap=\"400\">\n    <Skeleton width=\"200px\" height=\"40px\" animation=\"pulse\" />\n    <Skeleton width=\"200px\" height=\"40px\" animation=\"wave\" />\n    <Skeleton width=\"200px\" height=\"40px\" animation=\"none\" />\n  </Stack>\n)\n```\n\n### Shape variants\n\nThe `shape` prop controls the border radius applied to the placeholder.\n\n- `rectangle` (default): small border radius (~4 px)\n- `circle`: fully-rounded with a forced 1:1 aspect ratio\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"center\">\n    <Skeleton width=\"120px\" height=\"40px\" shape=\"rectangle\" />\n    <Skeleton width=\"60px\" height=\"60px\" shape=\"circle\" />\n  </Stack>\n)\n```\n\n### Size\n\nThe optional `size` prop is a square shortcut aligned with the `Avatar` scale —\nit applies equal width and height so you don't have to set both.\n\n- `2xs`: 24 px · `xs`: 32 px · `md`: 40 px\n\nIt is opt-in with no default; leave it unset to size the placeholder with\n`width`/`height`/`boxSize` instead. [SkeletonCircle](/components/feedback/skeletoncircle)\nbuilds on it to size its circle.\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"center\">\n    <Skeleton size=\"2xs\" />\n    <Skeleton size=\"xs\" />\n    <Skeleton size=\"md\" />\n  </Stack>\n)\n```\n\n## Component requirements\n\n### Accessibility\n\nSkeleton placeholders are **decorative by default** — they render with\n`aria-hidden=\"true\"` so screen readers skip over them. This is the correct\nbehavior: the shapes convey visual loading activity but carry no semantic\nmeaning on their own.\n\nTo communicate loading state to assistive technology, set `aria-busy=\"true\"` on\nthe **container** that wraps the skeleton region. When content has loaded, remove\nthe attribute (or set it to `false`) and render the real content in its place.\n\n```tsx\n// Announce the loading region to screen readers via aria-busy\n<section aria-busy={isLoading} aria-label=\"Product details\">\n  {isLoading ? (\n    <Skeleton width=\"100%\" height=\"120px\" />\n  ) : (\n    <ProductDetails product={product} />\n  )}\n</section>\n```\n\nPrefer the container `aria-busy` pattern above over labelling individual\nskeletons. A skeleton is a role-less `<div>`, so adding `aria-label` to it while\nun-hiding it (`aria-hidden={false}`) is an invalid ARIA combination that\naccessibility linters (axe) flag as `aria-prohibited-attr`. Announce the loading\nregion on the wrapping container instead.\n\n#### Reduced motion\n\nWhen the user has enabled the `prefers-reduced-motion: reduce` media condition,\nall animations are automatically disabled — regardless of the `animation` prop\nvalue. The `::after` wave sweep is also hidden. No additional configuration is\nrequired.\n\nIf your use case requires tracking and analytics for this component, it is good\npractice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"product-detail-skeleton\";\n\nexport const ProductDetailSkeleton = () => (\n  <div id={PERSISTENT_ID} aria-busy>\n    <Skeleton width=\"100%\" height=\"120px\" />\n  </div>\n);\n```\n\n#### Keyboard navigation\n\nSkeleton components are non-interactive and decorative. They do not receive\nfocus or support keyboard interaction.\n\n## API reference\n\n<PropsTable id=\"Skeleton\" />\n\n## Common patterns\n\n### Composing a card skeleton\n\nCombine `Skeleton` with `SkeletonCircle` and `SkeletonText` to build realistic\nloading layouts that mirror the final content.\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"flex-start\">\n    <SkeletonCircle size=\"md\" />\n    <Stack gap=\"200\">\n      <SkeletonText textStyle=\"lg\" lines={1} width=\"180px\" />\n      <SkeletonText lines={2} width=\"240px\" />\n    </Stack>\n  </Stack>\n)\n```\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Skeleton within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic Rendering\n\nRender a `Skeleton` placeholder and confirm it is present; it stretches to the `width`/`height` you give it and is decorative (`aria-hidden`) by default, so assistive technology skips it.\n\n```tsx\nimport { useState } from \"react\";\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport {\n  Skeleton,\n  Stack,\n  Text,\n  Button,\n  NimbusProvider,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"Skeleton - Basic rendering\", () => {\n  it(\"renders a decorative placeholder block\", () => {\n    render(\n      <NimbusProvider>\n        <Skeleton data-testid=\"skeleton\" width=\"200px\" height=\"40px\" />\n      </NimbusProvider>\n    );\n\n    const skeleton = screen.getByTestId(\"skeleton\");\n    expect(skeleton).toBeInTheDocument();\n    expect(skeleton).toHaveAttribute(\"aria-hidden\", \"true\");\n  });\n});\n```\n\n### Standalone Loading Pattern\n\nThe recommended way to use Skeleton: render a placeholder while data is loading, then swap in the real content with conditional rendering — Skeleton has no `isLoaded` prop, so the consumer owns the loading state.\n\n```tsx\nimport { useState } from \"react\";\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport {\n  Skeleton,\n  Stack,\n  Text,\n  Button,\n  NimbusProvider,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"Skeleton - Standalone loading pattern\", () => {\n  /**\n   * A representative consumer component: show a skeleton banner while\n   * `isLoading`, then render the real image once loading completes.\n   */\n  function ProductBanner({ isLoading }: { isLoading: boolean }) {\n    return isLoading ? (\n      <Skeleton width=\"288px\" height=\"120px\" />\n    ) : (\n      <img src=\"/banner.png\" alt=\"Product banner\" width={288} />\n    );\n  }\n\n  it(\"shows a skeleton while loading, then the real content\", async () => {\n    const Example = () => {\n      const [isLoading, setIsLoading] = useState(true);\n      return (\n        <Stack gap=\"400\">\n          <ProductBanner isLoading={isLoading} />\n          <Button onPress={() => setIsLoading(false)}>Finish loading</Button>\n        </Stack>\n      );\n    };\n\n    render(\n      <NimbusProvider>\n        <Example />\n      </NimbusProvider>\n    );\n\n    // While loading: real content is absent.\n    expect(screen.queryByAltText(\"Product banner\")).toBeNull();\n\n    await userEvent.click(\n      screen.getByRole(\"button\", { name: \"Finish loading\" })\n    );\n\n    // After loading: real content is present.\n    expect(screen.getByAltText(\"Product banner\")).toBeInTheDocument();\n  });\n});\n```\n\n### Announcing Loading with aria-busy\n\nSkeleton shapes are decorative (`aria-hidden`) so they are not announced individually; communicate the loading state to assistive technology by setting `aria-busy` on the surrounding container instead.\n\n```tsx\nimport { useState } from \"react\";\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport {\n  Skeleton,\n  Stack,\n  Text,\n  Button,\n  NimbusProvider,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"Skeleton - Container aria-busy pattern\", () => {\n  it(\"announces loading state via aria-busy on the container\", () => {\n    render(\n      <NimbusProvider>\n        <section\n          data-testid=\"container\"\n          aria-busy={true}\n          aria-label=\"Product details\"\n        >\n          <Skeleton width=\"100%\" height=\"120px\" />\n        </section>\n      </NimbusProvider>\n    );\n\n    const container = screen.getByTestId(\"container\");\n    expect(container).toHaveAttribute(\"aria-busy\", \"true\");\n    expect(container).toHaveAttribute(\"aria-label\", \"Product details\");\n  });\n\n  it(\"clears aria-busy once real content is rendered\", () => {\n    render(\n      <NimbusProvider>\n        <section data-testid=\"container\" aria-busy={false}>\n          <Text>Product details loaded</Text>\n        </section>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Product details loaded\")).toBeInTheDocument();\n    expect(screen.getByTestId(\"container\")).toHaveAttribute(\n      \"aria-busy\",\n      \"false\"\n    );\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-skeleton--docs)\n- [SkeletonText](/components/feedback/skeletontext)\n- [SkeletonCircle](/components/feedback/skeletoncircle)\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Conditional rendering (standalone pattern)",
+          "href": "#conditional-rendering-standalone-pattern",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Animation variants",
+          "href": "#animation-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Shape variants",
+          "href": "#shape-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size",
+          "href": "#size",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Reduced motion",
+          "href": "#reduced-motion",
+          "depth": 4,
+          "numbering": [
+            1,
+            3,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyboard navigation",
+          "href": "#keyboard-navigation",
+          "depth": 4,
+          "numbering": [
+            1,
+            3,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Common patterns",
+          "href": "#common-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Composing a card skeleton",
+          "href": "#composing-a-card-skeleton",
+          "depth": 3,
+          "numbering": [
+            1,
+            5,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Rendering",
+          "href": "#basic-rendering",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Standalone Loading Pattern",
+          "href": "#standalone-loading-pattern",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Announcing Loading with aria-busy",
+          "href": "#announcing-loading-with-aria-busy",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}