---
name: Spinner
menu: Components
---

import { livePreviewStyle } from '../helpers/constants'
import Spinner from './Spinner'
import cactusTheme from '@repay/cactus-theme'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# Spinner

Used to represent some action is happening in the background.

### Try it out

export const code = `<Spinner />`

<LiveProvider code={code} scope={{ Spinner }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Best practices

There should only be _one_ `Spinner` visible at any point in time. Instead of showing
multiple spinners for different areas that are updating either render a single spinner
covering the page, or render optimistically and then alert the user if a problem has occurred.

## Basic usage

```jsx
import React from 'react'
import { Spinner } from '@repay/cactus-web'

export default ({ isLoading }) => (isLoading ? <Spinner /> : <div>Content</div>)
```

## Properties

Has the same props as the icons from `@repay/cactus-icons`.