53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { View, ActivityIndicator, StyleSheet, Modal, Dimensions } from 'react-native';
|
|
import { useAppTheme } from '../context/ThemeContext';
|
|
|
|
interface LoadingOverlayProps {
|
|
visible: boolean;
|
|
}
|
|
|
|
const { width } = Dimensions.get('window');
|
|
const LIME = '#C6F135';
|
|
|
|
export const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ visible }) => {
|
|
const { isDark } = useAppTheme();
|
|
|
|
const cardBg = isDark ? '#1A1A1A' : '#FFFFFF';
|
|
const border = isDark ? '#2A2A2A' : '#EEEEEE';
|
|
|
|
return (
|
|
<Modal transparent visible={visible} animationType="fade">
|
|
<View style={styles.container}>
|
|
<View style={[
|
|
styles.card,
|
|
{ backgroundColor: cardBg, borderColor: border }
|
|
]}>
|
|
<ActivityIndicator size="large" color={LIME} />
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.75)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
card: {
|
|
width: 90,
|
|
height: 90,
|
|
borderRadius: 24,
|
|
borderWidth: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 10 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 20,
|
|
elevation: 10,
|
|
},
|
|
});
|