优化联赛选择模态框

app/(tabs)/index.tsx

@@ -31,6 +31,7 @@ export default function HomeScreen() {
   const [leagues, setLeagues] = useState<League[]>([]);
   const [matches, setMatches] = useState<Match[]>([]);
   const [loading, setLoading] = useState(true);
+  const [loadingLeagues, setLoadingLeagues] = useState(false);
 
   // Selection States
   // 默认足球
@@ -119,11 +120,14 @@ export default function HomeScreen() {
   const loadLeagues = async () => {
     try {
       if (selectedSportId !== null) {
+        setLoadingLeagues(true);
         const list = await fetchLeagues(selectedSportId, "");
         setLeagues(list);
       }
     } catch (e) {
       console.error(e);
+    } finally {
+      setLoadingLeagues(false);
     }
   };
 
@@ -213,7 +217,17 @@ export default function HomeScreen() {
       ) : (
         <TouchableOpacity
           style={[styles.filterBtn, { backgroundColor: filterBg }]}
-          onPress={() => setShowLeagueModal(true)}
+          onPress={() => {
+            // 立即显示弹窗
+            setShowLeagueModal(true);
+            // 如果联赛列表为空，立即设置loading状态并加载
+            if (selectedSportId !== null) {
+              if (leagues.length === 0) {
+                setLoadingLeagues(true);
+              }
+              loadLeagues();
+            }
+          }}
         >
           <IconSymbol name="trophy-outline" size={18} color={iconColor} />
           <ThemedText style={styles.filterText} numberOfLines={1}>
@@ -291,6 +305,7 @@ export default function HomeScreen() {
         onClose={() => setShowLeagueModal(false)}
         leagues={leagues}
         selectedLeagueKey={selectedLeagueKey}
+        loading={loadingLeagues}
         onSelect={handleLeagueSelect}
       />
     </ThemedView>