Skeleton
Use to show a placeholder while content is loading.
Installation
bash npx @moe/cli add skeleton Copy/paste the following code to @/components/ui/skeleton.tsx
import { cn } from "@/lib/utils";
import { View } from "react-native";
function Skeleton({
className,
...props
}: React.ComponentPropsWithoutRef<typeof View>) {
return (
<View
className={cn("rounded-md bg-secondary animate-pulse", className)}
{...props}
/>
);
}
export { Skeleton };Usage
import { Skeleton } from "@moe/registry/ui/skeleton";
import { View } from "react-native";
export function SkeletonDemo() {
return (
<View className="flex-row items-center gap-4">
<Skeleton className="h-12 w-12 rounded-full" />
<View className="gap-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</View>
</View>
);
}