Skeleton

Renders a loading placeholder with a subtle shimmer effect. It animates a gradient across the block when in view. Use it to indicate loading content in a smooth, visually consistent way.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/skeleton

npx layro-cli add @educlopez/skeleton

npx layro-cli add @educlopez/skeleton

bunx layro-cli add @educlopez/skeleton

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

Code

Dependencies

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { type ComponentProps, useCallback, useRef } from "react";
import {
  EASE_IN_OUT,
  LOOP_CLASS,
  LOOP_REPEAT_DELAY,
  loopTransition,
  useLoopInView,
} from "@/components/smoothui/lib/animation";

export type SkeletonProps = ComponentProps<"div"> & {