Skeleton

Use to show a placeholder while content is loading.

Usage

Import the component. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
const { ClassnameConf } = VM.require("uiisnear.near/widget/utils");
const { Skeleton, skeletonClassname } = VM.require(
  "uiisnear.near/widget/skeleton"
);
 
if (ClassnameConf == undefined) return "";
 
const [skeletonCircle, setSkeletonCircle] = useState("");
 
if (skeletonCircle === "") {
  let className = `${skeletonClassname} h-12 w-12 rounded-full`;
  return <ClassnameConf output={setSkeletonCircle} className={className} />;
}
 
if (Tailwind == undefined) return "";

<Tailwind>
  <Skeleton className={skeletonCircle} />
</Tailwind>

API Reference

Classnames

Classnames available to customize the component.

Function	Classname
Skeleton	skeletonClassname

Examples

Card

Sheet Slider