managarten/memoro/apps/mobile/components/LoadingScreen.tsx

import React, { useMemo } from 'react';
import { View, Dimensions } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import Text from './atoms/Text';
import { useTranslation } from 'react-i18next';
import { LogoSpinnerAnimation } from './molecules/LogoSpinnerAnimation';

/**
 * Einfacher Ladebildschirm für die App
 * @param {Object} props - Komponenten-Props
 * @param {string} [props.message] - Optionale Nachricht, die angezeigt werden soll
 */
interface LoadingScreenProps {
  message?: string;
}

export default function LoadingScreen({ message }: LoadingScreenProps) {
  const { isDark } = useTheme();

  // Safe translation usage with fallback
  let displayMessage = message;
  try {
    // Only try to use translation if no explicit message is provided
    if (!displayMessage) {
      const { t } = useTranslation();
      displayMessage = t('common.loading', 'Wird geladen...');
    }
  } catch (error) {
    // Fallback if translation fails
    displayMessage = displayMessage || 'Wird geladen...';
  }

  // Use same responsive sizing logic as recording button
  const logoSize = useMemo(() => {
    const { width, height } = Dimensions.get('window');
    const minDimension = Math.min(width, height);

    if (minDimension <= 375) {
      return 140; // iPhone SE, 13 mini
    } else if (minDimension <= 390) {
      return 150; // iPhone 13/14/15
    } else if (minDimension <= 393) {
      return 155; // iPhone 14 Pro, 16
    } else if (minDimension <= 402) {
      return 160; // iPhone 16 Pro
    } else if (minDimension <= 428) {
      return 170; // iPhone 13/14 Pro Max
    } else if (minDimension <= 430) {
      return 180; // iPhone 15/16 Pro Max
    } else {
      return 200; // iPad & Tablets
    }
  }, []);

  return (
    <View style={{
      flex: 1,
      position: 'relative',
      backgroundColor: isDark ? '#121212' : '#FFFFFF'
    }}>
      {/* Logo and text positioned exactly like recording button */}
      <View style={{
        position: 'absolute',
        top: '50%',
        left: 0,
        right: 0,
        alignItems: 'center',
        justifyContent: 'center',
        transform: [{ translateY: -(logoSize / 2 + 10) }]
      }}>
        <LogoSpinnerAnimation size={logoSize} />
        <Text variant='h3' style={{ marginTop: 32, fontWeight: '600' }}>
          {displayMessage}
        </Text>
      </View>
    </View>
  );
}