Opt-Out (No Skeleton)
Sometimes you want specific elements to remain visible during loading — a logo, a navigation bar, a status badge, or an important notice. AutoSkeleton supports this with opt-out mechanisms.
data-no-skeleton
Add data-no-skeleton to any element to keep it visible while the rest shows as a skeleton.
<AutoSkeleton loading={loading}> <div> {/* This stays visible during loading */} <div data-no-skeleton> <img src="/logo.svg" alt="Logo" /> <span>Always visible header</span> </div> {/* This becomes a skeleton */} <p>This text will show as a skeleton block...</p> <button>This becomes a skeleton too</button> </div></AutoSkeleton>How it works: The content layer uses visibility: hidden during loading. Elements with data-no-skeleton get visibility: visible, which overrides the parent. They're also given z-index: 20 to appear above the skeleton overlay.
Nested Elements
When a parent has data-no-skeleton, all its children are also visible:
<div data-no-skeleton> <strong>Title</strong> {/* visible */} <p>Description text</p> {/* visible */} <button>Action</button> {/* visible */}</div>.no-skeleton Class
The .no-skeleton CSS class is treated as an ignore selector by default. Elements with this class are skipped from skeleton generation entirely.
<AutoSkeleton loading={loading}> <div style={{ display: 'flex', gap: 12 }}> <button className="no-skeleton">Cancel</button> {/* skipped from skeleton */} <button>Submit</button> {/* becomes a skeleton */} </div></AutoSkeleton>data-skeleton-ignore
Works the same as .no-skeleton — the element is excluded from skeleton generation.
<div data-skeleton-ignore> <SensitiveWidget /> {/* not included in skeleton */}</div>Comparison
| Mechanism | During Loading | In Skeleton |
|---|---|---|
data-no-skeleton | Element stays visible | Element is not in skeleton (skipped) |
.no-skeleton | Element is hidden (with content) | Element is not in skeleton (skipped) |
data-skeleton-ignore | Element is hidden (with content) | Element is not in skeleton (skipped) |
| (no attribute) | Element is hidden (with content) | Element appears as skeleton block |
Use `data-no-skeleton` when the element should be visible during loading (logos, headers, notices).
Use `.no-skeleton` or `data-skeleton-ignore` when the element should be hidden during loading but not represented in the skeleton.
Custom Ignore Selectors
Add your own selectors via the ignoreSelectors config:
<AutoSkeleton loading={loading} config={{ ignoreSelectors: [ '.no-skeleton', '[data-skeleton-ignore]', '.toolbar', '#navigation', ] }}> <AppLayout /></AutoSkeleton>Example: Mixed Opt-Out
<AutoSkeleton loading={loading}> <div style={{ padding: 20 }}> {/* Always visible notice */} <div data-no-skeleton style={{ background: '#fef3c7', padding: 12, borderRadius: 8 }}> <strong>Important:</strong> This notice is always visible. </div> {/* Skeletonized content */} <h2>Article Title</h2> <p>Article body text that will show as skeleton blocks during loading.</p> {/* Mixed buttons */} <div style={{ display: 'flex', gap: 12 }}> <button className="no-skeleton">Cancel</button> <button>Submit</button> </div> </div></AutoSkeleton>