empty placeholder

2026-01-23 15:38:03 +08:00
parent a7b77963fd
commit c9516b4899
22 changed files with 164 additions and 111 deletions
--- a/assets/empty/country_dark.svg
+++ b/assets/empty/country_dark.svg
@@ -0,0 +1,8 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="32" cy="32" r="28" fill="#2C2F36"/>
+  <path d="M12 32H52" stroke="#3A3F47" stroke-width="4" stroke-linecap="round"/>
+  <path d="M32 12C24 20 24 44 32 52" stroke="#3A3F47" stroke-width="4" stroke-linecap="round"/>
+  <path d="M32 12C40 20 40 44 32 52" stroke="#3A3F47" stroke-width="4" stroke-linecap="round"/>
+  <path d="M18 22C24 26 40 26 46 22" stroke="#3A3F47" stroke-width="4" stroke-linecap="round"/>
+  <path d="M18 42C24 38 40 38 46 42" stroke="#3A3F47" stroke-width="4" stroke-linecap="round"/>
+</svg>
--- a/assets/empty/country_light.svg
+++ b/assets/empty/country_light.svg
@@ -0,0 +1,8 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="32" cy="32" r="28" fill="#DADADA"/>
+  <path d="M12 32H52" stroke="#EEEEEE" stroke-width="4" stroke-linecap="round"/>
+  <path d="M32 12C24 20 24 44 32 52" stroke="#EEEEEE" stroke-width="4" stroke-linecap="round"/>
+  <path d="M32 12C40 20 40 44 32 52" stroke="#EEEEEE" stroke-width="4" stroke-linecap="round"/>
+  <path d="M18 22C24 26 40 26 46 22" stroke="#EEEEEE" stroke-width="4" stroke-linecap="round"/>
+  <path d="M18 42C24 38 40 38 46 42" stroke="#EEEEEE" stroke-width="4" stroke-linecap="round"/>
+</svg>
--- a/assets/empty/league_dark.svg
+++ b/assets/empty/league_dark.svg
@@ -0,0 +1,7 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 12H46V20C46 30 40 37 32 40C24 37 18 30 18 20V12Z" fill="#2C2F36"/>
+  <path d="M24 16H40V20C40 26.5 36.5 31 32 33C27.5 31 24 26.5 24 20V16Z" fill="#3A3F47"/>
+  <path d="M26 42H38V46H26V42Z" fill="#3A3F47"/>
+  <path d="M22 46H42V50H22V46Z" fill="#2C2F36"/>
+  <path d="M24 50H40V54H24V50Z" fill="#3A3F47"/>
+</svg>
--- a/assets/empty/league_light.svg
+++ b/assets/empty/league_light.svg
@@ -0,0 +1,7 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 12H46V20C46 30 40 37 32 40C24 37 18 30 18 20V12Z" fill="#DADADA"/>
+  <path d="M24 16H40V20C40 26.5 36.5 31 32 33C27.5 31 24 26.5 24 20V16Z" fill="#EEEEEE"/>
+  <path d="M26 42H38V46H26V42Z" fill="#EEEEEE"/>
+  <path d="M22 46H42V50H22V46Z" fill="#DADADA"/>
+  <path d="M24 50H40V54H24V50Z" fill="#EEEEEE"/>
+</svg>
--- a/assets/empty/player_dark.svg
+++ b/assets/empty/player_dark.svg
@@ -0,0 +1,5 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="32" cy="32" r="28" fill="#2C2F36"/>
+  <circle cx="32" cy="26" r="9" fill="#3A3F47"/>
+  <path d="M16 52C18.8 42.5 25 38 32 38C39 38 45.2 42.5 48 52" fill="#3A3F47"/>
+</svg>
--- a/assets/empty/player_light.svg
+++ b/assets/empty/player_light.svg
@@ -0,0 +1,5 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="32" cy="32" r="28" fill="#DADADA"/>
+  <circle cx="32" cy="26" r="9" fill="#EEEEEE"/>
+  <path d="M16 52C18.8 42.5 25 38 32 38C39 38 45.2 42.5 48 52" fill="#EEEEEE"/>
+</svg>
--- a/assets/empty/team_dark.svg
+++ b/assets/empty/team_dark.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 10C12 10 24 6 32 6C40 6 52 10 52 10V30C52 44 38 54 32 58C26 54 12 44 12 30V10Z" fill="#2C2F36"/>
+  <path d="M18 14C18 14 26 12 32 12C38 12 46 14 46 14V29C46 40 36 48 32 51C28 48 18 40 18 29V14Z" fill="#3A3F47"/>
+</svg>
--- a/assets/empty/team_light.svg
+++ b/assets/empty/team_light.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 10C12 10 24 6 32 6C40 6 52 10 52 10V30C52 44 38 54 32 58C26 54 12 44 12 30V10Z" fill="#DADADA"/>
+  <path d="M18 14C18 14 26 12 32 12C38 12 46 14 46 14V29C46 40 36 48 32 51C28 48 18 40 18 29V14Z" fill="#EEEEEE"/>
+</svg>
--- a/assets/league_dark.svg
+++ b/assets/league_dark.svg
@@ -0,0 +1,7 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 12H46V20C46 30 40 37 32 40C24 37 18 30 18 20V12Z" fill="#2C2F36"/>
+  <path d="M24 16H40V20C40 26.5 36.5 31 32 33C27.5 31 24 26.5 24 20V16Z" fill="#3A3F47"/>
+  <path d="M26 42H38V46H26V42Z" fill="#3A3F47"/>
+  <path d="M22 46H42V50H22V46Z" fill="#2C2F36"/>
+  <path d="M24 50H40V54H24V50Z" fill="#3A3F47"/>
+</svg>
--- a/components/empty-placeholder.tsx
+++ b/components/empty-placeholder.tsx
@@ -0,0 +1,34 @@
+import { useTheme } from "@/context/ThemeContext";
+import { Image } from "expo-image";
+import React from "react";
+
+interface EmptyPlaceholderProps {
+  type: "team" | "league" | "player" | "country";
+  size?: number;
+}
+
+const imageMap: { [key: string]: any } = {
+  team_light: require("@/assets/empty/team_light.svg"),
+  team_dark: require("@/assets/empty/team_dark.svg"),
+  league_light: require("@/assets/empty/league_light.svg"),
+  league_dark: require("@/assets/empty/league_dark.svg"),
+  player_light: require("@/assets/empty/player_light.svg"),
+  player_dark: require("@/assets/empty/player_dark.svg"),
+  country_light: require("@/assets/empty/country_light.svg"),
+  country_dark: require("@/assets/empty/country_dark.svg"),
+};
+
+export function EmptyPlaceholder({ type, size = 64 }: EmptyPlaceholderProps) {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const suffix = isDark ? "_dark" : "_light";
+  const imageKey = `${type}${suffix}`;
+
+  return (
+    <Image
+      source={imageMap[imageKey] || imageMap.team_light}
+      style={{ width: size, height: size }}
+      contentFit="contain"
+    />
+  );
+}
--- a/components/league-modal.tsx
+++ b/components/league-modal.tsx
@@ -1,3 +1,4 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
@@ -47,14 +48,14 @@ export function LeagueModal({
      >
        {/* 左侧图标 */}
        <View style={[styles.iconContainer, { backgroundColor: iconBg }]}>
-          {league.logo ? (
+          {league.logo && league.logo.trim() !== "" && !league.logo.includes("placehold") ? (
            <Image
              source={{ uri: league.logo }}
              style={styles.leagueLogo}
              contentFit="contain"
            />
          ) : (
-            <IconSymbol name="trophy-outline" size={24} color={text} />
+            <EmptyPlaceholder type="league" size={24} />
          )}
        </View>

--- a/components/live-detail/live-league-info.tsx
+++ b/components/live-detail/live-league-info.tsx
@@ -1,3 +1,4 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { LiveScoreMatch } from "@/types/api";
@@ -23,15 +24,13 @@ export function LiveLeagueInfo({ match }: LiveLeagueInfoProps) {
      activeOpacity={0.7}
    >
      <View style={styles.left}>
-        {match.league_logo ? (
+        {match.league_logo && match.league_logo.trim() !== "" && !match.league_logo.includes("placehold") ? (
          <Image
            source={{ uri: match.league_logo }}
            style={styles.leagueLogo}
          />
        ) : (
-          <View style={[styles.fallbackLogo, { backgroundColor: "#333" }]}>
-            <IconSymbol name="trophy-outline" size={14} color="#AAA" />
-          </View>
+          <EmptyPlaceholder type="league" size={24} />
        )}
        <ThemedText style={[styles.leagueName, { color: textColor }]}>
          {match.league_name}
--- a/components/live-detail/live-score-header.tsx
+++ b/components/live-detail/live-score-header.tsx
@@ -1,3 +1,4 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { addFavorite, checkFavorite, removeFavorite } from "@/lib/api";
@@ -265,10 +266,14 @@ export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
              />
            </TouchableOpacity>
            <View style={styles.logoContainer}>
+              {homeLogo && homeLogo.trim() !== "" && !homeLogo.includes("placehold") ? (
                <Image
                  source={{ uri: homeLogo }}
                  style={[styles.teamLogo, isTennis && styles.tennisAvatar]}
                />
+              ) : (
+                <EmptyPlaceholder type={isTennis ? "player" : "team"} size={60} />
+              )}
            </View>
          </View>
          <ThemedText style={styles.teamName} numberOfLines={2}>
@@ -318,10 +323,14 @@ export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
        <View style={styles.teamInfo}>
          <View style={styles.teamLogoRow}>
            <View style={styles.logoContainer}>
+              {awayLogo && awayLogo.trim() !== "" && !awayLogo.includes("placehold") ? (
                <Image
                  source={{ uri: awayLogo }}
                  style={[styles.teamLogo, isTennis && styles.tennisAvatar]}
                />
+              ) : (
+                <EmptyPlaceholder type={isTennis ? "player" : "team"} size={60} />
+              )}
            </View>
            <TouchableOpacity
              onPress={() => toggleTeamFavorite(match.away_team_key, false)}
--- a/components/match-card-league.tsx
+++ b/components/match-card-league.tsx
@@ -1,12 +1,11 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
 import { useAppState } from "@/context/AppStateContext";
 import { useTheme } from "@/context/ThemeContext";
 import { addFavorite, removeFavorite } from "@/lib/api";
-import { getInitials, getLogoGradient } from "@/lib/avatar-utils";
 import { Match } from "@/types/api";
-import { LinearGradient } from "expo-linear-gradient";
 import { useRouter } from "expo-router";
 import React, { useState } from "react";
 import { Image, Pressable, StyleSheet, TouchableOpacity, View } from "react-native";
@@ -182,13 +181,10 @@ export function MatchCardLeague({
      <View style={styles.teamsColumn}>
        <View style={styles.teamRow}>
          {(() => {
-            const teamName = isTennis ? (match as any).eventFirstPlayer : (match.home || match.homeTeamName);
            const logoUri = isTennis
              ? (match as any).eventFirstPlayerLogo
              : ((match as any).homeLogo || match.homeTeamLogo);
            const hasLogo = logoUri && logoUri.trim() !== "" && !logoUri.includes("placehold");
-            const gradient = getLogoGradient(teamName || "");
-            const initials = getInitials(teamName || "");

            return hasLogo ? (
              <Image
@@ -196,14 +192,7 @@ export function MatchCardLeague({
                style={styles.teamLogo}
              />
            ) : (
-              <LinearGradient
-                colors={[gradient.color1, gradient.color2]}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 1, y: 1 }}
-                style={styles.teamLogoGradient}
-              >
-                <ThemedText style={styles.teamLogoText}>{initials}</ThemedText>
-              </LinearGradient>
+              <EmptyPlaceholder type="team" size={24} />
            );
          })()}
          <View style={styles.teamNameContainer}>
@@ -217,13 +206,10 @@ export function MatchCardLeague({

        <View style={[styles.teamRow, { marginTop: 10 }]}>
          {(() => {
-            const teamName = isTennis ? (match as any).eventSecondPlayer : (match.away || match.awayTeamName);
            const logoUri = isTennis
              ? (match as any).eventSecondPlayerLogo
              : ((match as any).awayLogo || match.awayTeamLogo);
            const hasLogo = logoUri && logoUri.trim() !== "" && !logoUri.includes("placehold");
-            const gradient = getLogoGradient(teamName || "");
-            const initials = getInitials(teamName || "");

            return hasLogo ? (
              <Image
@@ -231,14 +217,7 @@ export function MatchCardLeague({
                style={styles.teamLogo}
              />
            ) : (
-              <LinearGradient
-                colors={[gradient.color1, gradient.color2]}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 1, y: 1 }}
-                style={styles.teamLogoGradient}
-              >
-                <ThemedText style={styles.teamLogoText}>{initials}</ThemedText>
-              </LinearGradient>
+              <EmptyPlaceholder type="team" size={24} />
            );
          })()}
          <View style={styles.teamNameContainer}>
--- a/components/match-card.tsx
+++ b/components/match-card.tsx
@@ -1,3 +1,4 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
@@ -467,13 +468,16 @@ export function MatchCard({
          <View style={styles.contentRow}>
            <View style={styles.teamInfo}>
              <View style={styles.teamLogoPlaceholder}>
+                {homeLogo && homeLogo.trim() !== "" && !homeLogo.includes("placehold") ? (
                  <Image
-                  source={{
-                    uri: homeLogo,
-                  }}
+                    source={{ uri: homeLogo }}
                    style={styles.teamLogo}
                    contentFit="contain"
+                    onError={() => {}}
                  />
+                ) : (
+                  <EmptyPlaceholder type="team" size={18} />
+                )}
              </View>
              <ThemedText
                type="defaultSemiBold"
@@ -492,13 +496,16 @@ export function MatchCard({
          <View style={styles.contentRow}>
            <View style={styles.teamInfo}>
              <View style={styles.teamLogoPlaceholder}>
+                {awayLogo && awayLogo.trim() !== "" && !awayLogo.includes("placehold") ? (
                  <Image
-                  source={{
-                    uri: awayLogo,
-                  }}
+                    source={{ uri: awayLogo }}
                    style={styles.teamLogo}
                    contentFit="contain"
+                    onError={() => {}}
                  />
+                ) : (
+                  <EmptyPlaceholder type="team" size={18} />
+                )}
              </View>
              <ThemedText
                type="defaultSemiBold"
--- a/components/match-detail/basketball/basketball-score-table.tsx
+++ b/components/match-detail/basketball/basketball-score-table.tsx
@@ -1,3 +1,4 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { MatchDetailData } from "@/types/api";
 import React from "react";
@@ -143,7 +144,9 @@ export function BasketballScoreTable({
          <View style={styles.teamCell}>
            {row.logo && row.logo.trim() !== "" && !row.logo.includes("placehold") ? (
              <Image source={{ uri: row.logo }} style={styles.teamLogo} />
-            ) : null}
+            ) : (
+              <EmptyPlaceholder type="team" size={28} />
+            )}
            <ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
              {row.name}
            </ThemedText>
--- a/components/match-detail/basketball/basketball-stats.tsx
+++ b/components/match-detail/basketball/basketball-stats.tsx
@@ -1,9 +1,8 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
-import { getInitials, getLogoGradient } from "@/lib/avatar-utils";
 import { MatchDetailData } from "@/types/api";
 import { Image } from "expo-image";
-import { LinearGradient } from "expo-linear-gradient";
 import React, { useMemo, useState } from "react";
 import {
  ScrollView,
@@ -161,10 +160,6 @@ export function BasketballStats({ data, isDark }: BasketballStatsProps) {
  const awayTeamLogo = match.awayTeamLogo || "";
  const hasHomeLogo = homeTeamLogo && homeTeamLogo.trim() !== "" && !homeTeamLogo.includes("placehold");
  const hasAwayLogo = awayTeamLogo && awayTeamLogo.trim() !== "" && !awayTeamLogo.includes("placehold");
-  const homeGradient = getLogoGradient(homeTeamName);
-  const awayGradient = getLogoGradient(awayTeamName);
-  const homeInitials = getInitials(homeTeamName);
-  const awayInitials = getInitials(awayTeamName);

  return (
    <View style={[styles.container, { backgroundColor: bgColor }]}>
@@ -199,12 +194,7 @@ export function BasketballStats({ data, isDark }: BasketballStatsProps) {
          {hasHomeLogo ? (
            <Image source={{ uri: homeTeamLogo }} style={styles.teamTabLogo} contentFit="contain" />
          ) : (
-            <LinearGradient
-              colors={[homeGradient.color1, homeGradient.color2]}
-              style={styles.teamTabLogoGradient}
-            >
-              <ThemedText style={styles.teamTabLogoText}>{homeInitials}</ThemedText>
-            </LinearGradient>
+            <EmptyPlaceholder type="team" size={24} />
          )}
        </TouchableOpacity>
        <TouchableOpacity
@@ -218,12 +208,7 @@ export function BasketballStats({ data, isDark }: BasketballStatsProps) {
          {hasAwayLogo ? (
            <Image source={{ uri: awayTeamLogo }} style={styles.teamTabLogo} contentFit="contain" />
          ) : (
-            <LinearGradient
-              colors={[awayGradient.color1, awayGradient.color2]}
-              style={styles.teamTabLogoGradient}
-            >
-              <ThemedText style={styles.teamTabLogoText}>{awayInitials}</ThemedText>
-            </LinearGradient>
+            <EmptyPlaceholder type="team" size={24} />
          )}
        </TouchableOpacity>
      </View>
--- a/components/match-detail/football/football-score-table.tsx
+++ b/components/match-detail/football/football-score-table.tsx
@@ -1,3 +1,4 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { MatchDetailData } from "@/types/api";
 import React from "react";
@@ -89,7 +90,11 @@ export function FootballScoreTable({ data, isDark }: FootballScoreTableProps) {
      {rows.map((row, idx) => (
        <View key={idx} style={[styles.row, idx === 0 && styles.rowBorder]}>
          <View style={styles.teamCell}>
+            {row.logo && row.logo.trim() !== "" && !row.logo.includes("placehold") ? (
              <Image source={{ uri: row.logo }} style={styles.teamLogo} />
+            ) : (
+              <EmptyPlaceholder type="team" size={28} />
+            )}
            <ThemedText style={styles.teamName} numberOfLines={1}>
              {row.name}
            </ThemedText>
--- a/components/match-detail/league-info.tsx
+++ b/components/match-detail/league-info.tsx
@@ -1,3 +1,4 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { MatchDetailData } from "@/types/api";
@@ -25,12 +26,10 @@ export function LeagueInfo({ data, isDark }: LeagueInfoProps) {
      activeOpacity={0.7}
    >
      <View style={styles.left}>
-        {match.leagueLogo ? (
+        {match.leagueLogo && match.leagueLogo.trim() !== "" && !match.leagueLogo.includes("placehold") ? (
          <Image source={{ uri: match.leagueLogo }} style={styles.leagueLogo} />
        ) : (
-          <View style={[styles.fallbackLogo, { backgroundColor: "#333" }]}>
-            <IconSymbol name="trophy-outline" size={14} color="#AAA" />
-          </View>
+          <EmptyPlaceholder type="league" size={24} />
        )}
        <ThemedText style={[styles.leagueName, { color: textColor }]}>
          {match.leagueName}
--- a/components/match-detail/score-header.tsx
+++ b/components/match-detail/score-header.tsx
@@ -1,7 +1,7 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { addFavorite, checkFavorite, removeFavorite } from "@/lib/api";
-import { getInitials, getLogoGradient } from "@/lib/avatar-utils";
 import { storage } from "@/lib/storage";
 import { MatchDetailData } from "@/types/api";
 import { LinearGradient } from "expo-linear-gradient";
@@ -170,10 +170,6 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {

  const hasFirstLogo = firstPlayerLogo && firstPlayerLogo.trim() !== "" && !firstPlayerLogo.includes("placehold");
  const hasSecondLogo = secondPlayerLogo && secondPlayerLogo.trim() !== "" && !secondPlayerLogo.includes("placehold");
-  const firstGradient = getLogoGradient(firstPlayerName || "");
-  const secondGradient = getLogoGradient(secondPlayerName || "");
-  const firstInitials = getInitials(firstPlayerName || "");
-  const secondInitials = getInitials(secondPlayerName || "");

  return (
    <LinearGradient
@@ -243,14 +239,7 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
                  style={styles.teamLogo}
                />
              ) : (
-                <LinearGradient
-                  colors={[firstGradient.color1, firstGradient.color2]}
-                  start={{ x: 0, y: 0 }}
-                  end={{ x: 1, y: 1 }}
-                  style={styles.teamLogoGradient}
-                >
-                  <ThemedText style={styles.teamLogoText}>{firstInitials}</ThemedText>
-                </LinearGradient>
+                <EmptyPlaceholder type={isTennis ? "player" : "team"} size={60} />
              )}
            </View>
          </View>
@@ -283,14 +272,7 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
                  style={styles.teamLogo}
                />
              ) : (
-                <LinearGradient
-                  colors={[secondGradient.color1, secondGradient.color2]}
-                  start={{ x: 0, y: 0 }}
-                  end={{ x: 1, y: 1 }}
-                  style={styles.teamLogoGradient}
-                >
-                  <ThemedText style={styles.teamLogoText}>{secondInitials}</ThemedText>
-                </LinearGradient>
+                <EmptyPlaceholder type={isTennis ? "player" : "team"} size={60} />
              )}
            </View>
            <TouchableOpacity
--- a/components/matches-by-league.tsx
+++ b/components/matches-by-league.tsx
@@ -1,12 +1,11 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { MatchCardLeague } from "@/components/match-card-league";
 import { ThemedText } from "@/components/themed-text";
 import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
 import { fetchLeagues, fetchTodayMatches } from "@/lib/api";
-import { getInitials, getLogoGradient } from "@/lib/avatar-utils";
 import { League, Match } from "@/types/api";
 import { Image } from "expo-image";
-import { LinearGradient } from "expo-linear-gradient";
 import React, { useState } from "react";
 import {
  ActivityIndicator,
@@ -212,8 +211,6 @@ export function MatchesByLeague({
              <View style={styles.leagueHeaderLeft}>
                {(() => {
                  const hasLogo = league.logo && league.logo.trim() !== "" && !league.logo.includes("placehold");
-                  const gradient = getLogoGradient(league.name || "");
-                  const initials = getInitials(league.name || "");

                  return hasLogo ? (
                    <Image
@@ -221,14 +218,7 @@ export function MatchesByLeague({
                      style={[styles.leagueLogo, { backgroundColor: isDark ? "#3A3A3C" : "#E5E5E5" }]}
                    />
                  ) : (
-                    <LinearGradient
-                      colors={[gradient.color1, gradient.color2]}
-                      start={{ x: 0, y: 0 }}
-                      end={{ x: 1, y: 1 }}
-                      style={styles.leagueLogoGradient}
-                    >
-                      <ThemedText style={styles.leagueLogoText}>{initials}</ThemedText>
-                    </LinearGradient>
+                    <EmptyPlaceholder type="league" size={32} />
                  );
                })()}

--- a/components/upcoming-match-card.tsx
+++ b/components/upcoming-match-card.tsx
@@ -1,3 +1,4 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
@@ -122,12 +123,14 @@ export function UpcomingMatchCard({

      <View style={styles.teamsContainer}>
        <View style={styles.team}>
-          {match.homeTeamLogo && (
+          {match.homeTeamLogo && match.homeTeamLogo.trim() !== "" && !match.homeTeamLogo.includes("placehold") ? (
            <Image
              source={{ uri: match.homeTeamLogo }}
              style={styles.teamLogo}
              contentFit="contain"
            />
+          ) : (
+            <EmptyPlaceholder type="team" size={24} />
          )}
          <ThemedText
            type="defaultSemiBold"
@@ -143,12 +146,14 @@ export function UpcomingMatchCard({
        </View>

        <View style={styles.team}>
-          {match.awayTeamLogo && (
+          {match.awayTeamLogo && match.awayTeamLogo.trim() !== "" && !match.awayTeamLogo.includes("placehold") ? (
            <Image
              source={{ uri: match.awayTeamLogo }}
              style={styles.teamLogo}
              contentFit="contain"
            />
+          ) : (
+            <EmptyPlaceholder type="team" size={24} />
          )}
          <ThemedText
            type="defaultSemiBold"