Use to show a placeholder while content is loading.
import { Skeleton } from "@/lib/components/core/default/skeleton";
function Demo() {
return (
<div className="space-y-4">
<Skeleton className="h-44 w-64" />
<div className="flex items-center space-x-4">
<Skeleton className="size-10 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-44" />
<Skeleton className="h-4 w-36" />
</div>
</div>
</div>
);
}
Installation
Copy and paste the following code into your project.
import { cn } from "@/lib/utils/classes";
function Skeleton({
className,
show = true,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
show?: boolean;
}) {
if (!show) return props.children;
return (
<span
className={cn(
"relative block h-6 animate-pulse rounded-md bg-bg-muted",
props.children && "h-auto *:invisible",
className
)}
{...props}
/>
);
}
export { Skeleton };
Update the import paths to match your project setup.
Usage
Use the Skeleton component to show a placeholder while content is loading.
Options
Children
If you do not pass a fixed size, skeleton will take the size of the children.
import { Button } from "@/lib/components/core/default/button";
import { Skeleton } from "@/lib/components/core/default/skeleton";
function Demo() {
return (
<Skeleton>
<Button>Button</Button>
</Skeleton>
);
}
Show
Use the show prop to show/hide the skeleton.
import { Button } from "@/lib/components/core/default/button";
import { Skeleton } from "@/lib/components/core/default/skeleton";
function Demo() {
return (
<div className="flex flex-col items-center gap-4">
<Skeleton>
<Button>Button</Button>
</Skeleton>
<Skeleton show={false}>
<Button>Button</Button>
</Skeleton>
</div>
);
}
Examples
Loading data from an API
"use client";
import React from "react";
import { Button } from "@/lib/components/core/default/button";
import { Skeleton } from "@/lib/components/core/default/skeleton";
function Demo() {
const [status, setStatus] = React.useState<"idle" | "loading" | "error" | "success">("idle");
const apiCall = () => {
setStatus("loading");
setTimeout(() => {
setStatus("success");
}, 4000);
};
return (
<div className="flex flex-col items-center gap-4">
<Button isLoading={status === "loading"} onPress={apiCall}>
Simulate API Call
</Button>
<Skeleton show={status === "loading"}>
<p>Some text loaded from API.</p>
</Skeleton>
</div>
);
}
Wrapping children with fixed size
If you do not pass a fixed size, it will be calculated automatically.
import { Button } from "@/lib/components/core/default/button";
import { Skeleton } from "@/lib/components/core/default/skeleton";
function Demo() {
return (
<Skeleton className="size-20">
<Button>Button</Button>
</Skeleton>
);
}
API Reference
Skeleton accepts all HTML div element props and the following:
| Prop | Type | Default | Description |
|---|
show | boolean | true | Weather the visual style should be filled. |
