Spinner

The Spinner component wraps React Native's ActivityIndicator with consistent styling via NativeWind. It provides a simple, accessible way to communicate loading states to users.

Preview

Installation

npx novaui-cli add spinner

Import

import { Spinner } from 'novaui-components'

Basic Usage

The Spinner renders a spinning activity indicator with the primary theme color:

import { Spinner } from 'novaui-components'

export function BasicSpinner() {
  return <Spinner />
}

Sizes

Control the spinner size using React Native's size prop:

import { Spinner } from 'novaui-components'
import { View } from 'react-native'

export function SpinnerSizes() {
  return (
    <View className="flex-row items-center gap-6">
      <Spinner size="small" />
      <Spinner size="large" />
    </View>
  )
}

Custom Colors

Override the default primary color with the color prop:

import { Spinner } from 'novaui-components'
import { View } from 'react-native'

export function ColoredSpinners() {
  return (
    <View className="flex-row items-center gap-6">
      <Spinner />
      <Spinner color="red" />
      <Spinner color="green" />
    </View>
  )
}

Loading State Pattern

Combine Spinner with conditional rendering for loading states:

import { View, Text } from 'react-native'
import { Spinner } from 'novaui-components'

export function LoadingState({ isLoading, children }) {
  if (isLoading) {
    return (
      <View className="flex-1 items-center justify-center gap-3 p-8">
        <Spinner size="large" />
        <Text className="text-sm text-muted-foreground">Loading content...</Text>
      </View>
    )
  }

  return children
}

Props API

SpinnerProps

Extends React.ComponentPropsWithoutRef<typeof ActivityIndicator> and includes:

All standard React Native ActivityIndicator props are also supported.

Best Practices

1. Provide context: Pair Spinner with descriptive text so users know what is loading.

2. Appropriate sizing: Use small for inline indicators (e.g., inside buttons) and large for full-screen or section loading states.

3. Avoid blocking UI: Use Spinner for non-blocking loading states. For blocking operations, consider an overlay pattern.

4. Consistent placement: Center the spinner within its loading container for a polished look.

5. Accessibility: React Native's ActivityIndicator is automatically accessible to screen readers.

Related Components

• Use Spinner inside Button with the isLoading prop for button loading states
• Combine with Skeleton for content placeholder loading patterns
• Pair with Empty for loading-to-empty-state transitions