mojmajstor/components/ui/loading.tsx

import { View, ActivityIndicator } from "react-native";
import { useTheme } from "../theme";

interface LoadingProps {
  fullScreen?: boolean;
  skeleton?: boolean;
}

export function Loading({ fullScreen = false, skeleton = false }: LoadingProps) {
  const theme = useTheme();

  if (skeleton) {
    return (
      <View
        accessible
        accessibilityLabel="Се вчитува"
        accessibilityRole="progressbar"
        style={{ gap: theme.spacing.md }}
      >
        <View
          style={{
            backgroundColor: theme.colors.surfaceAlt,
            borderRadius: theme.radius.lg,
            height: 130,
            opacity: 0.55,
          }}
        />
        <View
          style={{
            backgroundColor: theme.colors.surfaceAlt,
            borderRadius: theme.radius.md,
            height: 18,
            width: "65%",
            opacity: 0.55,
          }}
        />
        <View
          style={{
            backgroundColor: theme.colors.surfaceAlt,
            borderRadius: theme.radius.md,
            height: 14,
            width: "45%",
            opacity: 0.55,
          }}
        />
        <View
          style={{
            backgroundColor: theme.colors.surfaceAlt,
            borderRadius: theme.radius.md,
            height: 90,
            opacity: 0.55,
          }}
        />
      </View>
    );
  }

  return (
    <View
      accessible
      accessibilityLabel="Се вчитува"
      accessibilityRole="progressbar"
      style={[{ alignItems: "center", justifyContent: "center" }, fullScreen && { flex: 1 }]}
    >
      <ActivityIndicator size="large" color={theme.colors.primary} />
    </View>
  );
}