"use client"; import { UserRoundPlusIcon, UsersRoundIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { Avatar, AvatarFallback, AvatarImage, } from "@/registry/default/ui/avatar"; import { Button } from "@/registry/default/ui/button"; import { Skeleton } from "@/registry/default/ui/skeleton"; const users = [ { delay: 3000, fallback: "SJ", followers: "15k", image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&dpr=2&q=80", name: "Sarah Johnson", role: "Design Engineer", }, { delay: 4000, fallback: "MA", followers: "8k", image: "https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=80&h=80&dpr=2&q=80", name: "Mark Bennett Andersson", role: "Product Designer", }, { delay: 3400, fallback: "AR", followers: "12k", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&dpr=2&q=80", name: "Alex Rivera", role: "UI/UX Designer", }, ]; function UserCard({ delay, user }: { delay: number; user: (typeof users)[0] }) { const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { const timer = setTimeout(() => { setIsLoaded(true); }, delay); return () => clearTimeout(timer); }, [delay]); if (!isLoaded) { return ; } return ( <> {user.fallback}

{user.name}

{user.role}

{user.followers} followers

); } function UserCardSkeleton() { return ( <>

); } export default function Particle() { return (

{users.map((user) => (

))}

); }

Skeleton 1

Instalação

Registry dependencies