优化联赛选择模态框

components/league-modal.tsx

@@ -6,7 +6,7 @@ import { League } from "@/types/api";
 import { Image } from "expo-image";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Modal, Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { ActivityIndicator, Modal, Pressable, ScrollView, StyleSheet, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 interface LeagueModalProps {
@@ -14,6 +14,7 @@ interface LeagueModalProps {
   onClose: () => void;
   leagues: League[];
   selectedLeagueKey: string | null;
+  loading?: boolean;
   onSelect: (leagueKey: string) => void;
 }
 
@@ -22,6 +23,7 @@ export function LeagueModal({
   onClose,
   leagues,
   selectedLeagueKey,
+  loading = false,
   onSelect,
 }: LeagueModalProps) {
   const { theme } = useTheme();
@@ -52,7 +54,14 @@ export function LeagueModal({
             </Pressable>
           </View>
           <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
-            {leagues.length === 0 ? (
+            {loading ? (
+              <View style={styles.loadingContainer}>
+                <ActivityIndicator size="large" color={Colors[theme].tint} />
+                <ThemedText style={styles.loadingText}>
+                  {t("home.loading")}
+                </ThemedText>
+              </View>
+            ) : leagues.length === 0 ? (
               <View style={styles.emptyContainer}>
                 <ThemedText style={styles.emptyText}>
                   {t("home.no_leagues")}
@@ -160,6 +169,16 @@ const styles = StyleSheet.create({
   scrollView: {
     maxHeight: 400,
   },
+  loadingContainer: {
+    padding: 40,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  loadingText: {
+    marginTop: 12,
+    fontSize: 14,
+    opacity: 0.6,
+  },
   emptyContainer: {
     padding: 40,
     alignItems: "center",