Loading

Components for indicating loading and progress states.

Prerequisites

Circular loading indicator for inline or small loading states.

import { Spinner } from '@tetherto/mdk-core-ui'

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Spinner size
`className`	`string`	none	Additional CSS class

<Spinner />
<Spinner size="sm" />
<Spinner size="lg" />

<Button disabled>
  <Spinner size="sm" /> Loading...
</Button>

Full-screen or section loading overlay.

import { Loader } from '@tetherto/mdk-core-ui'

Prop	Type	Default	Description
`fullscreen`	`boolean`	`false`	Cover entire viewport
`message`	`string`	none	Loading message
`className`	`string`	none	Additional CSS class

<Loader />
<Loader message="Loading data..." />
<Loader fullscreen message="Please wait..." />

<div className="relative min-h-[200px]">
  {isLoading && <Loader />}
  {data && <DataDisplay data={data} />}
</div>