Skeleton
The Skeleton
component is used as a placeholder while content is loading. It provides a simple visual representation of the component that is being loaded, typically as a gray or light-colored block.
Usage
To use the Skeleton
, import it from your components and pass the width
, height
, and className
props to customize its appearance.
Basic Skeleton
A simple skeleton with default width and height.
import React from "react";
import { Skeleton } from "@firecms/ui";
export default function SkeletonBasicDemo() {
return <Skeleton />;
}
Custom Sized Skeleton
A skeleton component that showcases custom width and height.
import React from "react";
import { Skeleton } from "@firecms/ui";
export default function SkeletonCustomSizeDemo() {
return (
<>
<Skeleton width={200} height={20} />
<Skeleton width={100} height={10} />
</>
);
}
Skeleton With Custom Classes
Demonstrates usage of the className
prop to apply custom styles.
import React from "react";
import { Skeleton } from "@firecms/ui";
export default function SkeletonCustomClassDemo() {
return <Skeleton className="my-4 bg-red-400" />;
}