Shimmer Skeleton

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface ShimmerSkeletonProps extends React.ComponentProps<"div"> {
8  /** Milliseconds for one pass of the shimmer across the block. */
9  duration?: number
10  /** Milliseconds to hold before this block's first pass. */
11  delay?: number
12  /** Render a plain block with no pass over it. */
13  shimmer?: boolean
14}
15 
16/**
17 * The sweep is a gradient translated across a clipped box, not a background
18 * position on the block itself, so a placeholder costs one composited layer
19 * however many of them are on the page at once.
20 */
21export function ShimmerSkeleton({
22  className,
23  duration = 1600,
24  delay = 0,
25  shimmer = true,
26  style,
27  children,
28  ...props
29}: ShimmerSkeletonProps) {
30  return (
31    <div
32      data-slot="shimmer-skeleton"
33      aria-hidden="true"
34      className={cn(
35        "bg-muted relative isolate h-4 w-full overflow-hidden rounded-md",
36        className
37      )}
38      style={
39        {
40          "--shimmer-duration": `${duration}ms`,
41          "--shimmer-delay": `${delay}ms`,
42          ...style,
43        } as React.CSSProperties
44      }
45      {...props}
46    >
47      {shimmer ? (
48        <span className="animate-skeleton-shimmer absolute inset-0 bg-[linear-gradient(90deg,transparent,color-mix(in_oklch,var(--foreground)_9%,transparent),transparent)] motion-reduce:hidden" />
49      ) : null}
50      {children}
51    </div>
52  )
53}
54 
55export interface ShimmerSkeletonTextProps extends ShimmerSkeletonProps {
56  /** How many lines of placeholder text to draw. */
57  lines?: number
58  /** Width of the last line, which is short the way a real one is. */
59  lastLineWidth?: string
60}
61 
62/**
63 * Lines are offset from each other so the sweep runs down the paragraph rather
64 * than firing across every line at once.
65 */
66export function ShimmerSkeletonText({
67  lines = 3,
68  lastLineWidth = "62%",
69  className,
70  duration = 1600,
71  delay = 0,
72  shimmer = true,
73  ...props
74}: ShimmerSkeletonTextProps) {
75  return (
76    <div
77      data-slot="shimmer-skeleton-text"
78      className={cn("flex w-full flex-col gap-2.5", className)}
79    >
80      {Array.from({ length: lines }, (_, index) => (
81        <ShimmerSkeleton
82          key={index}
83          duration={duration}
84          delay={delay + index * 120}
85          shimmer={shimmer}
86          style={
87            index === lines - 1 && lines > 1
88              ? { width: lastLineWidth }
89              : undefined
90          }
91          {...props}
92        />
93      ))}
94// … truncated