Leaf UI
  • English

      • Skeleton

      Show a content placeholder while loading.

      Basic usage

      Live previewBasic usage
      basic.tsx
      import { Button, Skeleton } from '@sudden3/leaf-ui';
import { useState } from 'react';

export function SkeletonBasic() {
  const [loading, setLoading] = useState(true);
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Button variant="outline" onClick={() => setLoading(!loading)}>
        Toggle loading
      </Button>
      <Skeleton loading={loading} avatar rows={3} rowWidths={['100%', '85%', '55%']} round>
        <p>Project content is ready.</p>
      </Skeleton>
      <Skeleton active={false} title={false} rows={2} />
    </div>
  );
}

      Skeleton API

      PropertyTypeDefaultDescription
      loading / activebooleantrueShow placeholder / animate
      avatar / roundbooleanfalseAvatar placeholder / round rows
      titlebooleantrueTitle placeholder
      titleWidthnumber | string'38%'Title width
      rowsnumber3Body rows, up to 20
      rowWidthsreadonly (number | string)[]—Widths of each row
      childrenReactNode—Loaded content

      Types

      Import the exported types when defining props or building item lists.

      import type { SkeletonProps } from '@sudden3/leaf-ui';

      Usage notes

      When loading is false, render children. Reduced motion preferences and ConfigProvider motion settings control the animation.