Spinner
Loading indicator.
Installation
npx axiom add spinnerpnpm dlx axiom add spinneryarn dlx axiom add spinnerbun x axiom add spinnerInstalls: react-native-reanimated.
Usage
import { Spinner } from '@/components/ui/spinner';
<Spinner />
<Spinner size="lg" color="muted" label="Loading messages" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | number | 'md' | From the icon size tokens: 16, 20, 24pt, or a number. |
color | ContentColor | 'default' | Content color from the theme. Use inverse on solid backgrounds, muted when the spinner is secondary. |
label | string | 'Loading' | Accessibility label, announced when the spinner appears. It isn’t rendered: put visible text next to it yourself. |
animating | boolean | true | false hides the spinner without unmounting it, keeping its space in the layout. |
delay | number | 0 | Waits this many ms before showing. A 150–300ms delay avoids a flash on fast responses. |
style | StyleProp<ViewStyle> | — | Extra styles for the container. |
The rotation runs on the UI thread, so it keeps turning while JavaScript is busy. With reduce motion on, it pulses instead of spinning.
Use cases
Loading a screen for the first time
A centered spinner with a delay, when there is nothing to show yet and the layout of the result isn’t known.
if (isLoading) {
return (
<View style={styles.center}>
<Spinner size="lg" color="muted" delay={200} label="Loading invoice" />
</View>
);
}Loading more at the end of a list
A small spinner as the list footer while the next page loads.
<FlatList
data={people}
onEndReached={fetchNextPage}
ListFooterComponent={
isFetchingNextPage ? (
<Spinner color="muted" style={{ padding: 20 }} />
) : null
}
/>Inline status
A small spinner next to text that says what is happening, for background work the user can ignore.
<OptionItem
icon="refresh"
iconColor="blue"
label="iCloud Photos"
description={`Uploading ${done} of ${total}…`}
trailing={<Spinner size="sm" color="muted" />}
/>When to use it
Use a spinner for short or indeterminate waits. When the shape of the content is known, a Skeleton usually feels faster. Inside a button, use its loading prop instead.