SkeletonBlock

Rectangular shimmer placeholder used to hint at content shape while data is loading.

import { SkeletonBlock } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`circle`	Optional	`boolean`	—	—
`className`	Optional	`string`	—	—
`width`	Optional	`string \| number`	—	—
`height`	Optional	`string \| number`	—	—
`borderRadius`	Optional	`string \| number`	—	—

Usage

A pulsing placeholder used to indicate loading content. Supports rectangular and circular shapes.

Exports

Name	Description
`SkeletonBlock`	A single skeleton element with configurable dimensions and border radius

`SkeletonBlock` Props

All props are optional.

Prop	Type	Default	Description
`width`	`number \| string`	—	Width in pixels (number) or any CSS value (string)
`height`	`number \| string`	—	Height in pixels (number) or any CSS value (string)
`borderRadius`	`number \| string`	—	Border radius; ignored when `circle` is true
`circle`	`boolean`	`false`	Renders a perfect circle using `height` as the diameter
`className`	`string`	—	Additional class for the element

All other div HTML attributes are forwarded.

Notes

Passing a number to width, height, or borderRadius automatically appends 'px'.

Example

/** * Runnable example for SkeletonBlock. */import { SkeletonBlock } from '@tetherto/mdk-react-devkit'export const SkeletonExample = () => (  <div className="mdk-example-col">    {/* Text lines */}    <SkeletonBlock width={320} height={16} borderRadius={4} />    <SkeletonBlock width={240} height={16} borderRadius={4} />    <SkeletonBlock width={280} height={16} borderRadius={4} />    {/* Avatar + text row */}    <div className="mdk-example-inline">      <SkeletonBlock circle height={40} />      <div className="mdk-example-col">        <SkeletonBlock width={160} height={14} borderRadius={4} />        <SkeletonBlock width={120} height={12} borderRadius={4} />      </div>    </div>    {/* Card placeholder */}    <SkeletonBlock width="100%" height={80} borderRadius={8} />  </div>)