Skeleton loader
Reserves content layout while predictable data is loading.
On this page
This docs is LLM-friendly and available as clean Markdown.
Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more
Usage
import { GlSkeletonLoader } from "gitlab-ui-react/skeleton-loader";<GlSkeletonLoader />Default
Use the default line skeleton for text-like content. Match the approximate size of the final content to reduce layout shift.
Text skeleton
import { GlSkeletonLoader } from "gitlab-ui-react/skeleton-loader";
export default function SkeletonLoaderExample() {
return <GlSkeletonLoader />;
}
Custom shapes
Pass SVG shapes as children when the loading layout contains avatars, controls, or other predictable geometry.
Custom skeleton
import { GlSkeletonLoader } from "gitlab-ui-react/skeleton-loader";
export default function SkeletonLoaderCustomExample() {
return (
<GlSkeletonLoader className="max-w-full" height={92} width={360}>
<circle cx="32" cy="32" r="32" />
<rect height="14" rx="4" width="170" x="80" y="8" />
<rect height="12" rx="4" width="240" x="80" y="32" />
<rect height="12" rx="4" width="200" x="80" y="52" />
<rect height="12" rx="4" width="320" y="80" />
</GlSkeletonLoader>
);
}
Accessibility
- Keep a visible page or section heading outside the skeleton so users know what is loading.
- Avoid placing interactive controls inside a loading skeleton.
- The built-in SVG title announces loading, and animation is removed when the user prefers reduced motion.
- Replace the skeleton with real content as soon as it is available.
API
| Prop | Description | Default |
|---|---|---|
lines |
Sets the number of generated text lines. | 3 |
equalWidthLines |
Makes every generated line span the full width. | false |
width |
Sets the SVG viewBox width and default wrapper width. | Automatic |
height |
Sets the SVG viewBox height and default wrapper height. | Automatic |
children |
Supplies SVG shapes instead of generated lines. | — |
preserveAspectRatio |
Sets the SVG preserveAspectRatio value. |
"xMidYMid meet" |
uniqueKey |
Sets a stable prefix for internal SVG IDs. | Generated |
baseUrl |
Prefixes SVG fragment references when the page uses a base URL. | "" |