Skeleton Placeholder
The SkeletonPlaceholder
component is a great way to show that content is
loading instead of using a circular or linear progress bar.
Simple Example
The SkeletonPlaceholder
component will default to a height of 1.125em
and
use a random width between 40%
and 85%
of the container.
Click the "Reset Demo" button to see the random width behavior in action.
"use client";
import { SkeletonPlaceholder } from "@react-md/core/transition/SkeletonPlaceholder";
import { type ReactElement } from "react";
export default function SimpleExample(): ReactElement {
return <SkeletonPlaceholder />;
}
Custom Min and Max Width
The random width can be customized by configuring the minPercentage
and
maxPercentage
props.
"use client";
import { SkeletonPlaceholder } from "@react-md/core/transition/SkeletonPlaceholder";
import { type ReactElement } from "react";
export default function CustomMinAndMaxWidthExample(): ReactElement {
return <SkeletonPlaceholder minPercentage={20} maxPercentage={95} />;
}
Static Width
If a random width should not be used, provide a width
instead.
"use client";
import { Box } from "@react-md/core/box/Box";
import { SkeletonPlaceholder } from "@react-md/core/transition/SkeletonPlaceholder";
import { type ReactElement } from "react";
export default function StaticWidthExample(): ReactElement {
return (
<Box align="start" stacked fullWidth>
<SkeletonPlaceholder width="40%" />
</Box>
);
}
Configuring the Height
The height for the skeleton placeholder can be configured globally by changing
the core.$skeleton-placeholder-height Sass variable, providing a height
prop, or setting the --rmd-skeleton-placeholder-height
custom property with
core.transition-set-var mixin.
Using the Hook
If the skeleton placeholder animation needs to be applied to a different
element, the useSkeletonPlaceholder
hook can be used instead.
"use client";
import { useSkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
import { type ReactElement } from "react";
export default function UsingTheHookExample(): ReactElement {
const { style, className } = useSkeletonPlaceholder();
return <div style={style} className={className} />;
}
Replacing Content
Ssr Only
A skeleton layout can be created without any client-side javascript by using the
skeletonPlaceholder
class name utility function and
randomSkeletonPlaceholder
function. Since this is a "server-only"
component,
there will be no rehydration required for the random values.
Try navigating to the ssr only example page and reloading a few times to see this code in action.
import { Box } from "@react-md/core/box/Box";
import {
randomSkeletonPlaceholder,
skeletonPlaceholder,
} from "@react-md/core/transition/skeletonPlaceholderUtils";
import { type ReactElement } from "react";
import "server-only";
export default function SsrOnlyExample(): ReactElement {
return (
<Box grid>
{Array.from({ length: 20 }, (_, i) => (
<div
key={i}
style={randomSkeletonPlaceholder()}
className={skeletonPlaceholder()}
/>
))}
</Box>
);
}