Use to show a placeholder while content is loading. By using a Skeleton, you can give the user an idea of what the content will look like, reducing the perceived loading time and CLS (Cumulative Layout Shift).
1import { Skeleton } from "@ngrok/mantle/skeleton";2 3<Skeleton className="w-full" />;The Skeleton component can be included within components. You can also pass Tailwind utility classes for further control.
1import { MediaObject } from "@ngrok/mantle/media-object";2import { Skeleton } from "@ngrok/mantle/skeleton";3 4<MediaObject.Root className="w-full max-w-96 items-center">5 <MediaObject.Media>6 <Skeleton className="h-12 w-12 rounded-full" />7 </MediaObject.Media>8 <MediaObject.Content className="space-y-3">9 <Skeleton className="w-full" />10 <Skeleton className="w-4/5" />11 </MediaObject.Content>12</MediaObject.Root>;The Skeleton accepts the following props in addition to the standard HTML div attributes.