import * as React from "react";

import { cn } from "@/lib/utils";

export interface ShimmerCardProps extends React.HTMLAttributes<HTMLDivElement> {
  lines?: number;
  showAvatar?: boolean;
  showMedia?: boolean;
}

function ShimmerCard({
  lines = 3,
  showAvatar = true,
  showMedia = true,
  className,
  ...props
}: ShimmerCardProps) {
  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-xl border border-border bg-card p-5",
        className
      )}
      {...props}
    >
      <div className="relative z-0 space-y-4">
        <div className="flex items-center gap-3">
          {showAvatar ? (
            <div className="h-10 w-10 rounded-full bg-muted" />
          ) : null}
          <div className="flex-1 space-y-2">
            <div className="h-3 w-1/2 rounded-md bg-muted" />
            <div className="h-3 w-1/3 rounded-md bg-muted" />
          </div>
        </div>
        {showMedia ? (
          <div className="h-32 w-full rounded-lg bg-muted" />
        ) : null}
        <div className="space-y-2">
          {Array.from({ length: Math.max(1, lines) }).map((_, index) => (
            <div
              key={index}
              className={cn(
                "h-3 rounded-md bg-muted",
                index === lines - 1 ? "w-2/3" : "w-full"
              )}
            />
          ))}
        </div>
      </div>
      <div
        className="shimmer-card pointer-events-none absolute inset-0 z-10 text-muted-foreground opacity-35"
        style={{
          backgroundImage:
            "linear-gradient(110deg, transparent 0%, currentColor 45%, transparent 80%)",
          backgroundSize: "200% 100%",
        }}
      />
      <style jsx>{`
        @keyframes shimmer-card {
          0% {
            background-position: -200% 0;
          }
          100% {
            background-position: 200% 0;
          }
        }

        .shimmer-card {
          animation: shimmer-card 1.8s linear infinite;
        }
      `}</style>
    </div>
  );
}

export { ShimmerCard };
Shimmer Card

Dependencies

Files

Installation
