Skeleton ​

Decorative loading placeholder. Marked aria-hidden="true" so assistive tech skips it while real content loads.

PreviewSkeleton

Usage ​

tsx
import { Skeleton } from "@sometic/react/structure";

export function Example(): JSX.Element {
    return (
        <>
            <Skeleton />
            <Skeleton animated={false} />
        </>
    );
}
vue
<script setup>
import { Skeleton } from "@sometic/vue/structure";
</script>

<template>
    <Skeleton />
    <Skeleton :animated="false" />
</template>
js
import { resolveSkeleton } from "@sometic/dom/skeleton";

const animated = resolveSkeleton();
const staticView = resolveSkeleton({ animated: false });
html
<script type="module">
    import "@sometic/elements/structure";
</script>

<sometic-skeleton></sometic-skeleton>
html
<script src="https://cdn.jsdelivr.net/npm/@sometic/elements@1.1.6/dist/cdn/sometic-elements.iife.js"></script>

<sometic-skeleton></sometic-skeleton>
html
<script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@sometic/elements@1.1.6/dist/cdn/sometic-elements.esm.js"
></script>

<sometic-skeleton></sometic-skeleton>

How it works ​

resolveSkeleton is pure. Animated by default (data-animated present). React accepts animated={false} to drop that attribute. The custom element currently calls resolveSkeleton() with defaults (animated) and does not observe an animated attribute.

Anatomy ​

PartAttrs
Rootaria-hidden="true", optional data-animated

Props / attributes ​

React SkeletonProps ​

Extends HTMLAttributes<HTMLDivElement>. Remaining native div attrs are forwarded to the root.

PropTypeDefaultDescription
animatedbooleantrueAdds data-animated when true
Native attrsremaining div HTML attrs—Forwarded to the root

Vue ​

Skeleton from @sometic/vue/structure. Prop: animated.

Custom element (sometic-skeleton) ​

No observed attributes today. Connect renders the default animated skeleton. For animated={false}, use React, Vue, or resolveSkeleton({ animated: false }) in Vanilla JS.

Events / callbacks ​

None beyond native/forwarded HTML handlers.

Accessibility ​

  • Always aria-hidden. Pair with a live status or Progress/Spinner for announcements.
  • Replace skeletons with real content as soon as data arrives.

Styling ​

Target [data-slot="root"][aria-hidden="true"], [data-animated].

When to use / When not ​

Use for layout placeholders while content loads.

Do not use as the sole status announcement — pair with Spinner or Progress.

FAQ ​

Why aria-hidden? Skeletons are decorative; announce status separately.

CE animated attr? Not observed. Use React or resolve for non-animated.

Vue component? Yes. @sometic/vue/structure.

Does React forward native attrs? Yes, onto the root div.