1 files changed, 55 insertions, 0 deletions
diff --git a/apps/mobile/components/LoadingScreen.tsx b/apps/mobile/components/LoadingScreen.tsx
new file mode 100644
index 0000000..c64c79d
--- /dev/null
+++ b/apps/mobile/components/LoadingScreen.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { View, Text, ActivityIndicator, StyleSheet, useColorScheme } from 'react-native';
+import { Colors } from '../constants/Colors';
+
+interface LoadingScreenProps {
+  /** Optional message to display */
+  message?: string;
+}
+
+/**
+ * Loading screen component
+ * Displayed while checking authentication state
+ */
+export function LoadingScreen({ message = 'Loading...' }: LoadingScreenProps) {
+  const colorScheme = useColorScheme() ?? 'dark';
+  const colors = Colors[colorScheme];
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <View style={styles.content}>
+        <Text style={[styles.title, { color: colors.tint }]}>Makima</Text>
+        <ActivityIndicator
+          size="large"
+          color={colors.tint}
+          style={styles.spinner}
+        />
+        <Text style={[styles.message, { color: colors.textSecondary }]}>
+          {message}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  content: {
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 42,
+    fontWeight: 'bold',
+    marginBottom: 24,
+  },
+  spinner: {
+    marginBottom: 16,
+  },
+  message: {
+    fontSize: 14,
+  },
+});