Loading

Indicate that content is loading or an operation is in progress.

Loading indicator

basic.tsx

import { Loading } from '@ifhover/leaf-ui';

export function LoadingBasic() {
  return <Loading tip="Loading" />;
}

Sizes

Small

Medium

Large

sizes.tsx

import { Flex, Loading, Text } from '@ifhover/leaf-ui';

export function LoadingSizes() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      <Flex direction="column" gap="sm" align="start">
        <Text>Small</Text>
        <Loading size="sm" />
      </Flex>
      <Flex direction="column" gap="sm" align="start">
        <Text>Medium</Text>
        <Loading />
      </Flex>
      <Flex direction="column" gap="sm" align="start">
        <Text>Large</Text>
        <Loading size="lg" />
      </Flex>
    </Flex>
  );
}

Loading an area

Cover a content area while loading and restore interaction when finished.

Leaf Garden

See project details and recent updates here.

overlay.tsx

import { Button, Card, Loading, Space } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function LoadingOverlay() {
  const [spinning, setSpinning] = useState(true);
  return (
    <Space direction="vertical" align="stretch">
      <Button variant="outline" onClick={() => setSpinning(!spinning)}>
        {spinning ? 'Finish loading' : 'Start loading'}
      </Button>
      <Loading spinning={spinning} tip="Loading projects" delay={200}>
        <Card>
          <strong>Leaf Garden</strong>
          <p>See project details and recent updates here.</p>
          <Button variant="outline">Edit project</Button>
        </Card>
      </Loading>
    </Space>
  );
}

Loading API

Property	Type	Default	Description
`spinning`	`boolean`	`true`	Whether loading
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Indicator size
`tip`	`ReactNode`	—	Hint text
`delay`	`number`	`0`	Display delay in milliseconds
`children`	`ReactNode`	—	Covered content

Types

Import these types to define props or prepare data.

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

Usage notes

Used alone, Loading displays an indicator. With children it covers the area and prevents interaction while visible. A delay prevents flicker for brief requests.

#Loading

#Loading indicator

#Sizes

#Loading an area

#Loading API

#Types