Skeleton

v1.0.0

Inline loading placeholder for pending content.

Import

import { Skeleton } from '@meteorack/sdk-react';

How To Use It

Use it while asynchronous data is loading and you already know the shape of the final UI.
Match the approximate footprint of the final content so the page does not jump when data arrives.

Works Well With

Card Table PluginGrid

Props

width?: string

CSS width for the placeholder block.

height?: string

CSS height for the placeholder block.

className?: string

Optional class name for the skeleton element.

style?: React.CSSProperties

Optional inline style overrides, often used for radius or spacing.

Example

Skeleton.tsx

import { Card, Skeleton } from '@meteorack/sdk-react';

export function LoadingCard() {
  return (
    <Card>
      <Skeleton width="140px" height="16px" />
      <Skeleton width="100%" height="12px" style={{ marginTop: '12px' }} />
      <Skeleton width="80%" height="12px" style={{ marginTop: '8px' }} />
    </Card>
  );
}

PreviousTable NextEmptyState