Feedbackduskmoonimplemented8 demos

Spin

Spin shows local loading state for a pending operation.

Import@duskmoon-dev/components/spin

3API sections

9documented props

6behavior scenarios

Key API

spinningsizetipindicatordelayfullscreen

Usage

When to use

Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

Spin is most often configured through `spinning`, `size`, `tip`, `indicator`.

Covered behavior

Renders a spinning indicator by default

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

DuskMoon Spin

Basic usage

authored

Import the component stylesheet and Spin from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Spin } from "@duskmoon-dev/components/spin";

export function Example() {
  return (<Spin>DuskMoon Spin</Spin>);
}

Preview

DuskMoon Spin

Renders a spinning indicator by default

test-backed

Spin scenario from the component test coverage: renders a spinning indicator by default.

Source

import "@duskmoon-dev/components/styles.css";
import { Spin } from "@duskmoon-dev/components/spin";

export function SpinRendersASpinningIndicatorDemo() {
  return (<Spin>DuskMoon Spin</Spin>);
}

Preview

DuskMoon Spin

Supports spinning false

test-backed

Spin scenario from the component test coverage: supports spinning false.

Source

import "@duskmoon-dev/components/styles.css";
import { Spin } from "@duskmoon-dev/components/spin";

export function SpinSupportsSpinningFalseDemo() {
  return (<Spin>DuskMoon Spin</Spin>);
}

Preview

DuskMoon Spin

Renders tip and nested children

test-backed

Spin scenario from the component test coverage: renders tip and nested children.

Source

import "@duskmoon-dev/components/styles.css";
import { Spin } from "@duskmoon-dev/components/spin";

export function SpinRendersTipAndNestedDemo() {
  return (<Spin>DuskMoon Spin</Spin>);
}

Preview

DuskMoon Spin

Applies size and custom className

test-backed

Spin scenario from the component test coverage: applies size and custom classname.

Source

import "@duskmoon-dev/components/styles.css";
import { Spin } from "@duskmoon-dev/components/spin";

export function SpinAppliesSizeAndCustomDemo() {
  return (<Spin>DuskMoon Spin</Spin>);
}

Preview

DuskMoon Spin

Supports default indicator static method

test-backed

Spin scenario from the component test coverage: supports default indicator static method.

Source

import "@duskmoon-dev/components/styles.css";
import { Spin } from "@duskmoon-dev/components/spin";

export function SpinSupportsDefaultIndicatorStaticDemo() {
  return (<Spin>DuskMoon Spin</Spin>);
}

Preview

DuskMoon Spin

Forwards indicator ref

test-backed

Spin scenario from the component test coverage: forwards indicator ref.

Source

import "@duskmoon-dev/components/styles.css";
import { Spin } from "@duskmoon-dev/components/spin";

export function SpinForwardsIndicatorRefDemo() {
  return (<Spin>DuskMoon Spin</Spin>);
}

Preview

Sunshine Theme

DuskMoon Spin

Moonlight Theme

DuskMoon Spin

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Spin>DuskMoon Spin</Spin>
</div>

<div data-theme="moonlight">
  <Spin>DuskMoon Spin</Spin>
</div>

API

The API reference below lists every parsed exported type or interface for Spin. Start with `spinning`, `size`, `tip`, `indicator` for common usage.

Types: packages/components/src/components/spin/Spin.types.tsScenarios: packages/components/src/components/spin/Spin.test.tsx

SpinPropsinterface extends Omit<ComponentProps<"div">, "children">

Prop	Type	Required	Description
`spinning`	`boolean`	No	spinning configures Spin.
`size`	`SpinSize`	No	size configures Spin.
`tip`	`ReactNode`	No	tip configures Spin.
`indicator`	`ReactNode`	No	indicator configures Spin.
`delay`	`number`	No	delay configures Spin.
`fullscreen`	`boolean`	No	fullscreen configures Spin.
`wrapperClassName`	`string`	No	wrapperClassName configures Spin.
`children`	`ReactNode`	No	children configures Spin.

SpinComponentinterface extends React.ForwardRefExoticComponent< SpinProps & React.RefAttributes<HTMLDivElement> >

Prop	Type	Required	Description
`setDefaultIndicator`	`(indicator?: ReactNode) => void`	Yes	setDefaultIndicator configures Spin.

SpinSizetype

"small" | "default" | "large"