"use client";

import * as React from "react";

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

type SkeletonLoaderVariant = "text" | "avatar" | "card";

type SkeletonLoaderSize = "sm" | "md" | "lg";

export interface SkeletonLoaderProps
  extends React.HTMLAttributes<HTMLDivElement> {
  variant?: SkeletonLoaderVariant;
  lineCount?: number;
  size?: SkeletonLoaderSize;
  showMedia?: boolean;
}

const sizeStyles: Record<SkeletonLoaderSize, string> = {
  sm: "h-8 w-8",
  md: "h-12 w-12",
  lg: "h-16 w-16",
};

const lineWidths = ["w-full", "w-5/6", "w-2/3", "w-3/4"];

export function SkeletonLoader({
  variant = "text",
  lineCount = 3,
  size = "md",
  showMedia = true,
  className,
  ...props
}: SkeletonLoaderProps) {
  const safeLineCount = Math.max(1, lineCount);

  if (variant === "avatar") {
    return (
      <div
        className={cn("flex items-center gap-4", className)}
        {...props}
      >
        <div
          className={cn(
            "animate-pulse rounded-full bg-muted",
            sizeStyles[size]
          )}
        />
        <div className="flex-1 space-y-2">
          {Array.from({ length: safeLineCount }).map((_, index) => (
            <div
              key={`avatar-line-${index}`}
              className={cn(
                "h-3 rounded-full bg-muted",
                lineWidths[index % lineWidths.length]
              )}
            />
          ))}
        </div>
      </div>
    );
  }

  if (variant === "card") {
    return (
      <div
        className={cn(
          "w-full overflow-hidden rounded-xl border border-border bg-card",
          className
        )}
        {...props}
      >
        {showMedia ? (
          <div className="h-32 w-full animate-pulse bg-muted" />
        ) : null}
        <div className="space-y-3 p-5">
          <div className="h-4 w-1/3 animate-pulse rounded-full bg-muted" />
          {Array.from({ length: safeLineCount }).map((_, index) => (
            <div
              key={`card-line-${index}`}
              className={cn(
                "h-3 animate-pulse rounded-full bg-muted",
                lineWidths[(index + 1) % lineWidths.length]
              )}
            />
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className={cn("space-y-2", className)} {...props}>
      {Array.from({ length: safeLineCount }).map((_, index) => (
        <div
          key={`text-line-${index}`}
          className={cn(
            "h-3 animate-pulse rounded-full bg-muted",
            lineWidths[index % lineWidths.length]
          )}
        />
      ))}
    </div>
  );
}

export type { SkeletonLoaderVariant, SkeletonLoaderSize };
Skeleton Loader

Dependencies

Files

Installation
