Spinner

Spinner indicates loading or processing states. Use for async operations, data fetching, or form submissions.

Preview

Basic Usage

<Spinner />

Sizes

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

Custom Colors

<Spinner color={colors['gold-primary']} />
<Spinner color={colors['text-primary']} />
<Spinner color="#22c55e" />
<Spinner color="#ef4444" />

Loading Overlay

Full-screen loading indicator with optional message.

Content behind overlay

Loading…

<LoadingOverlay
  visible={isLoading}
  message="Loading..."
/>

Inline Loading States

<Button disabled={isLoading}>
  {isLoading ? (
    <>
      <Spinner size="sm" color="#fff" />
      <Text>Saving...</Text>
    </>
  ) : (
    <Text>Save Changes</Text>
  )}
</Button>

API Reference

Spinner Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Spinner size
`color`	`string`	Gold primary	Spinner color
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	`'Loading'`	Screen reader label

LoadingOverlay Props

Prop	Type	Default	Description
`visible`	`boolean`	Required	Whether visible
`message`	`string`	-	Loading message
`size`	`SpinnerSize`	`'lg'`	Spinner size
`style`	`ViewStyle`	-	Custom styles

Complete Example

import { Spinner, LoadingOverlay, Button, Card } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';
import { useState } from 'react';

function DataScreen() {
  const [isLoading, setIsLoading] = useState(false);
  const [isSaving, setIsSaving] = useState(false);

  const fetchData = async () => {
    setIsLoading(true);
    try {
      await loadReadings();
    } finally {
      setIsLoading(false);
    }
  };

  const saveReading = async () => {
    setIsSaving(true);
    try {
      await saveToServer();
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <View style={styles.container}>
      <LoadingOverlay
        visible={isLoading}
        message="Loading readings..."
      />

      <Card style={styles.card}>
        <Text style={styles.title}>Your Reading</Text>
        <Text style={styles.content}>Hexagram 11 - Peace</Text>

        <Button
          onPress={saveReading}
          disabled={isSaving}
          style={styles.button}
        >
          {isSaving ? (
            <View style={styles.loadingButton}>
              <Spinner size="sm" color="#1a1a24" />
              <Text style={styles.buttonText}>Saving...</Text>
            </View>
          ) : (
            <Text style={styles.buttonText}>Save Reading</Text>
          )}
        </Button>
      </Card>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Loading States</Text>
        <View style={styles.spinnerRow}>
          <Spinner size="sm" />
          <Spinner size="md" />
          <Spinner size="lg" />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  card: {
    padding: 20,
    marginBottom: 24,
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 8,
  },
  content: {
    fontSize: 14,
    color: '#8a8a9a',
    marginBottom: 16,
  },
  button: {
    marginTop: 8,
  },
  loadingButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  buttonText: {
    fontWeight: '600',
  },
  section: {
    marginTop: 24,
  },
  sectionTitle: {
    fontSize: 14,
    color: '#8a8a9a',
    marginBottom: 16,
  },
  spinnerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 24,
  },
});