29 lines
709 B
TypeScript
29 lines
709 B
TypeScript
|
// components/Skeleton.tsx
|
||
|
|
// Lightweight shimmer placeholder. Used while server components
|
||
|
|
// stream in the initial paint, and inside client explorers while
|
||
|
|
// TanStack Query is fetching subsequent pages.
|
||
|
|
|
||
|
|
interface SkeletonProps {
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Skeleton({ className = "" }: SkeletonProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
aria-hidden="true"
|
||
|
|
className={
|
||
|
|
"relative overflow-hidden bg-surface-warm rounded-md " +
|
||
|
|
className
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
className="absolute inset-0 animate-pulse"
|
||
|
|
style={{
|
||
|
|
background:
|
||
|
|
"linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent)"
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|