> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Spinner

> Indicate progress with an optional status label

export const LocalUiPlayground = ({component, title, height = 640}) => {
  const [playgroundUrl, setPlaygroundUrl] = useState(null);
  useEffect(() => {
    const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    setPlaygroundUrl(isLocal ? 'http://localhost:8090/' : 'https://selcouthdigital.github.io/amisi-mobile-starter/');
  }, []);
  if (!playgroundUrl) {
    return null;
  }
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-zinc-950/10 bg-white dark:border-white/10 dark:bg-zinc-950">
      <iframe src={`${playgroundUrl}?component=${component}`} title={title} className="block w-full" style={{
    height
  }} loading="lazy" />
    </div>;
};

`Spinner` centers a native activity indicator and optional caption.

<LocalUiPlayground component="spinner" title="Interactive Spinner example" />

## Usage

```tsx theme={null}
import { Spinner } from '@amisi-mobile-starter/ui';

export const LoadingState = () => (
  <Spinner label="Loading account…" size="large" />
);
```

## Props

| Prop    | Type                             | Default                     | Description                           |
| ------- | -------------------------------- | --------------------------- | ------------------------------------- |
| `label` | `string`                         | `undefined`                 | Caption rendered below the indicator. |
| `style` | `StyleProp<ViewStyle>`           | `undefined`                 | Style applied to the outer wrapper.   |
| `color` | `string`                         | Current spinner theme color | Native indicator color.               |
| `size`  | `ActivityIndicatorProps['size']` | React Native default        | Native indicator size.                |

`Spinner` has the combined public type of React Native `ActivityIndicatorProps` and `ViewProps`. Props other than `label` and `style` are passed to `ActivityIndicator`.