LoadingState

Standardized loading indicator for panels, sections, and pages

In Panel

Usage

import { LoadingState } from '@tryvienna/ui'

<LoadingState label="Loading workstreams..." />

Examples

Default

Default

<LoadingState label="Loading workstreams..." />

With Description

With Description

<LoadingState label="Loading data" description="This may take a moment" />

Inline

Inline

<LoadingState variant="inline" label="Saving..." />

In Panel

In Panel

<div className="w-80 h-64 border border-border rounded-lg bg-background flex flex-col">
  <div className="px-4 py-3 border-b border-border">
    <span className="text-sm font-medium">Panel Title</span>
  </div>
  <LoadingState label="Loading content..." />
</div>

Spinner Sizes

Spinner Sizes

<div className="flex flex-col gap-8">
  <LoadingState spinnerSize="xs" label="Extra small" variant="inline" />
  <LoadingState spinnerSize="sm" label="Small" variant="inline" />
  <LoadingState spinnerSize="md" label="Medium" variant="inline" />
  <LoadingState spinnerSize="lg" label="Large" variant="inline" />
  <LoadingState spinnerSize="xl" label="Extra large" variant="inline" />
</div>

API Reference

LoadingState

Prop	Type	Default	Description
variant	'inline' | 'centered' | 'fullscreen'	-	Layout variant
label	string	-	Primary label shown next to/below spinner
description	string	-	Secondary description
spinnerSize	SpinnerProps['size']	-	Spinner size (passed to Spinner component)
spinnerVariant	SpinnerProps['variant']	-	Spinner color variant (passed to Spinner component)

Data Attributes

Component	data-slot
LoadingState	"loading-state"