Leaf UI
  • English

      • Loading

      Indicate that content is loading or work is in progress.

      Basic usage

      Live previewBasic usage
      Loading
      Leaf Garden

      View the project overview and recent updates.

      basic.tsx
      import { Button, Loading } from '@sudden3/leaf-ui';
import { useState } from 'react';
export function LoadingBasic() {
  const [spinning, setSpinning] = useState(true);
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <div className="leaf-demo-row">
        <Loading size="sm" />
        <Loading tip="Loading" />
        <Loading size="lg" />
      </div>
      <Button variant="outline" onClick={() => setSpinning(!spinning)}>
        {spinning ? 'Stop loading' : 'Start loading'}
      </Button>
      <Loading spinning={spinning} tip="Loading project" delay={200}>
        <div className="leaf-demo-surface">
          <strong>Leaf Garden</strong>
          <p>View the project overview and recent updates.</p>
          <Button variant="outline">Edit project</Button>
        </div>
      </Loading>
    </div>
  );
}

      Loading API

      PropTypeDefaultDescription
      spinningbooleantrueWhether loading is active
      size'sm' | 'md' | 'lg''md'Spinner size
      tipReactNode—Loading message
      delaynumber0Delay before displaying, in milliseconds
      childrenReactNode—Content covered during loading

      Types

      Import the component props and item types when preparing your own values.

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

      Usage notes

      Use alone for a spinner, or pass children to cover a content region and block interaction while the overlay is visible. delay avoids flashes for short requests. The cursor keeps its normal appearance.