1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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,
},
});
|
