178 lines
4.5 KiB
TypeScript
178 lines
4.5 KiB
TypeScript
/*
|
|
* File: LoadingState.tsx
|
|
* Description: Loading state component for patient data fetching
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
ActivityIndicator,
|
|
StyleSheet,
|
|
} from 'react-native';
|
|
import { theme } from '../../../theme/theme';
|
|
import Icon from 'react-native-vector-icons/Feather';
|
|
|
|
// ============================================================================
|
|
// INTERFACES
|
|
// ============================================================================
|
|
|
|
interface LoadingStateProps {
|
|
title?: string;
|
|
subtitle?: string;
|
|
showIcon?: boolean;
|
|
iconName?: string;
|
|
size?: 'small' | 'large';
|
|
}
|
|
|
|
// ============================================================================
|
|
// LOADING STATE COMPONENT
|
|
// ============================================================================
|
|
|
|
/**
|
|
* LoadingState Component
|
|
*
|
|
* Purpose: Display loading state during data fetching
|
|
*
|
|
* Features:
|
|
* - Customizable loading messages
|
|
* - Optional icon display
|
|
* - Different sizes (small/large)
|
|
* - Centered layout with spinner
|
|
* - Medical-themed design
|
|
*/
|
|
const LoadingState: React.FC<LoadingStateProps> = ({
|
|
title = 'Loading...',
|
|
subtitle = 'Please wait while we fetch the data',
|
|
showIcon = true,
|
|
iconName = 'loader',
|
|
size = 'large',
|
|
}) => {
|
|
// ============================================================================
|
|
// RENDER HELPERS
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Render Large Loading State
|
|
*
|
|
* Purpose: Render full-screen loading state
|
|
*/
|
|
const renderLargeState = () => (
|
|
<View style={styles.container}>
|
|
{/* Loading Animation */}
|
|
<View style={styles.loadingContainer}>
|
|
{showIcon && (
|
|
<View style={styles.iconContainer}>
|
|
<Icon
|
|
name={iconName}
|
|
size={32}
|
|
color={theme.colors.primary}
|
|
/>
|
|
</View>
|
|
)}
|
|
<ActivityIndicator
|
|
size="large"
|
|
color={theme.colors.primary}
|
|
style={styles.spinner}
|
|
/>
|
|
</View>
|
|
|
|
{/* Loading Text */}
|
|
<Text style={styles.title}>{title}</Text>
|
|
<Text style={styles.subtitle}>{subtitle}</Text>
|
|
</View>
|
|
);
|
|
|
|
/**
|
|
* Render Small Loading State
|
|
*
|
|
* Purpose: Render compact loading state
|
|
*/
|
|
const renderSmallState = () => (
|
|
<View style={styles.smallContainer}>
|
|
<ActivityIndicator
|
|
size="small"
|
|
color={theme.colors.primary}
|
|
style={styles.smallSpinner}
|
|
/>
|
|
<Text style={styles.smallText}>{title}</Text>
|
|
</View>
|
|
);
|
|
|
|
// ============================================================================
|
|
// MAIN RENDER
|
|
// ============================================================================
|
|
|
|
return size === 'large' ? renderLargeState() : renderSmallState();
|
|
};
|
|
|
|
// ============================================================================
|
|
// STYLES
|
|
// ============================================================================
|
|
|
|
const styles = StyleSheet.create({
|
|
// Large Loading State
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingHorizontal: theme.spacing.xl,
|
|
paddingVertical: theme.spacing.xxl,
|
|
backgroundColor: theme.colors.background,
|
|
},
|
|
loadingContainer: {
|
|
position: 'relative',
|
|
marginBottom: theme.spacing.lg,
|
|
},
|
|
iconContainer: {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
marginTop: -16,
|
|
marginLeft: -16,
|
|
zIndex: 1,
|
|
},
|
|
spinner: {
|
|
transform: [{ scale: 1.5 }],
|
|
},
|
|
title: {
|
|
fontSize: 20,
|
|
color: theme.colors.textPrimary,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
textAlign: 'center',
|
|
marginBottom: theme.spacing.sm,
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
textAlign: 'center',
|
|
lineHeight: 24,
|
|
},
|
|
|
|
// Small Loading State
|
|
smallContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: theme.spacing.md,
|
|
},
|
|
smallSpinner: {
|
|
marginRight: theme.spacing.sm,
|
|
},
|
|
smallText: {
|
|
fontSize: 14,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
},
|
|
});
|
|
|
|
export default LoadingState;
|
|
|
|
/*
|
|
* End of File: LoadingState.tsx
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/ |