Skeleton

import { Skeleton } from "@fanvue/ui";
import type { SkeletonAnimation, SkeletonProps, SkeletonVariant } from "@fanvue/ui";

import { Skeleton } from "@fanvue/ui";

<Skeleton width={200} height={20} />

import { Skeleton } from "@fanvue/ui";

<div className="w-72 space-y-3">
  <Skeleton variant="rectangular" width="100%" height={160} />
  <div className="flex items-center gap-3 px-2">
    <Skeleton variant="circular" width={40} height={40} />
    <div className="flex-1 space-y-1">
      <Skeleton variant="text" width="70%" />
      <Skeleton variant="text" width="50%" />
    </div>
  </div>
  <div className="space-y-1 px-2">
    <Skeleton variant="text" />
    <Skeleton variant="text" width="90%" />
  </div>
</div>

import { Skeleton } from "@fanvue/ui";

<Skeleton variant="rounded">
  <div className="h-24 w-64">Content shape preserved</div>
</Skeleton>

import { Skeleton } from "@fanvue/ui";

<div className="flex flex-col gap-4">
  <Skeleton variant="text" width={200} />
  <Skeleton variant="circular" width={40} height={40} />
  <Skeleton variant="rectangular" width={240} height={120} />
  <Skeleton variant="rounded" width={240} height={120} />
  <Skeleton variant="rectangular" width={240} height={120} animation="wave" />
  <Skeleton variant="rectangular" width={240} height={120} animation={false} />
</div>

import { Skeleton } from "@fanvue/ui";

<div className="flex items-center gap-3">
  <Skeleton variant="circular" width={48} height={48} />
  <div className="flex-1 space-y-1">
    <Skeleton variant="text" width="60%" />
    <Skeleton variant="text" width="40%" />
  </div>
</div>