Todos os componentes

Skeleton Loader

Skeleton Loader é um componente de feedback para React e Tailwind CSS, da biblioteca SmoothUI, com licença MIT. Copia e cola no teu projeto.

SmoothUI MIT feedback

O que é

Skeleton Loader é um componente de feedback para React e Tailwind CSS, da biblioteca SmoothUI, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de SmoothUI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Skeleton Loader

index.tsx
"use client";

import { cn } from "@/lib/utils";
import type { ReactNode } from "react";

export interface SkeletonProps {
  /** Content to wrap - skeleton will match its dimensions */
  children?: ReactNode;
  /** Additional classes */
  className?: string;
  /** When true, shows skeleton effect. When false, shows children */
  loading?: boolean;
}

const Skeleton = ({ loading = true, children, className }: SkeletonProps) => {
  // If not loading and has children, just render children
  if (!loading && children) {
    return <>{children}</>;
  }

  // If loading with children, wrap them and apply skeleton effect
  if (loading && children) {
    return (
      <div
        aria-busy="true"
        aria-live="polite"
        className={cn("relative", className)}
      >
        {/* Children are invisible but maintain layout */}
        <div className="invisible">{children}</div>
        {/* Skeleton overlay that matches children's dimensions */}
        <div
          aria-hidden="true"
          className="absolute inset-0 animate-pulse rounded-[inherit] bg-muted-foreground/20"
        />
      </div>
    );
  }

  // Basic skeleton block (no children)
  return (
    <div
      aria-busy="true"
      className={cn(
        "animate-pulse rounded-md bg-muted-foreground/20",
        className
      )}
    />
  );
};

export default Skeleton;

Componentes parecidos