Content Skeleton

Renders a skeleton loading placeholder or content. Shows a pulsing overlay when loading, or the children when not. Used to indicate loading states in a UI.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/content-skeleton

npx layro-cli add @educlopez/content-skeleton

npx layro-cli add @educlopez/content-skeleton

bunx layro-cli add @educlopez/content-skeleton

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

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

export interface ContentSkeletonProps {
  /** 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;
}